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

DDD
Lepaskan: 2024-11-03 23:52:30
asal
943 orang telah melayarinya

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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan