Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mengendalikan Ralat Pemuatan Imej dengan Atribut onerror dalam Semua Pelayar?

Bagaimana untuk Mengendalikan Ralat Pemuatan Imej dengan Atribut onerror dalam Semua Pelayar?

DDD
DDDasal
2024-11-03 23:52:301027semak imbas

How to Handle Image Loading Errors with the onerror Attribute in All Browsers?

Kendalikan Ralat Pemuatan Imej dengan Atribut onerror

Menggabungkan imej ke dalam aplikasi web selalunya memerlukan pengendalian kemungkinan kegagalan pemuatan. Atribut onerror menyediakan penyelesaian yang mudah untuk mengendalikan ralat sedemikian dengan anggun.

Latar Belakang

Seperti yang diterangkan dalam kod HTML yang diberikan, atribut onerror ditetapkan pendengar acara yang melaksanakan skrip apabila proses pemuatan imej menghadapi ralat. Walau bagaimanapun, seperti yang dinyatakan dalam pertanyaan, pendekatan ini mungkin gagal dalam penyemak imbas tertentu seperti Chrome dan Mozilla.

Penyelesaian

Untuk memastikan keserasian merentas penyemak imbas, pertimbangkan untuk menggunakan yang berikut sintaks:

<code class="html"><img src="invalid_link" onerror="this.onerror=null;this.src='https://placeimg.com/200/300/animals';"></code>

Kod ini menyediakan imej sandaran alternatif jika imej utama gagal dimuatkan. Untuk mengelakkan gelung tak terhingga jika URL sandaran juga tidak sah, kod tersebut membatalkan pengendali ralat menggunakan "this.onerror=null;".

Demonstrasi Langsung

An demonstrasi interaktif penyelesaian ini tersedia di pautan berikut:

  • http://jsfiddle.net/oLqfxjoz/

Pertimbangan Tambahan

Seperti yang digariskan dalam penyelesaian, menggunakan pendekatan ini memastikan keserasian dalam kedua-dua Chrome dan Mozilla. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa pengendalian ralat memuatkan imej mungkin berbeza-beza merentas persekitaran penyemak imbas yang berbeza.

Atas ialah kandungan terperinci Bagaimana untuk Mengendalikan Ralat Pemuatan Imej dengan Atribut onerror dalam Semua Pelayar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn