Mengapa Atribut `onerror` untuk Imej Berkelakuan Berbeza dalam Chrome dan Mozilla?

Menyelesaikan Isu Pemuatan Imej dengan Atribut Onerror

Dalam pembangunan web, kami sering menghadapi senario di mana imej gagal dimuatkan kerana pautan yang rosak atau ralat pelayan. Atribut onerror bagi elemen img membolehkan kami mengendalikan situasi sedemikian dengan menentukan imej alternatif untuk dipaparkan. Walau bagaimanapun, pengguna telah melaporkan ketidakkonsistenan dalam fungsinya merentas penyemak imbas yang berbeza, terutamanya dalam Chrome dan Mozilla.

Untuk menggambarkan isu ini, mari kita pertimbangkan coretan kod berikut:

<code class="html"><img src="invalid_image.jpg" onerror="this.src='alternate_image.jpg';"></code>

Kod ini cuba untuk memuatkan imej daripada sumber yang tidak sah. Jika imej gagal dimuatkan, pengendali kesalahan harus mencetuskan, menggantikan imej yang rosak dengan imej ganti yang ditentukan. Walau bagaimanapun, pengguna mendapati bahawa pendekatan ini tidak berfungsi dalam penyemak imbas selain Internet Explorer.

Sebab yang mendasari tingkah laku ini ialah penyemak imbas mengendalikan peristiwa onerror secara berbeza. Sesetengah penyemak imbas, seperti Chrome dan Mozilla, akan mencetuskan acara beberapa kali jika imej ganti gagal dimuatkan, membawa kepada gelung tak terhingga. Untuk mengelakkan ini, kami perlu membatalkan pengendali kesalahan selepas percubaan pertama menggunakan kod yang disemak berikut:

<code class="html"><img src="invalid_image.jpg" onerror="this.onerror=null;this.src='alternate_image.jpg';"></code>

Dengan membatalkan pengendali kesalahan, kami memastikan bahawa peristiwa hanya akan mencetuskan sekali, menghalang gelung tak terhingga . Pendekatan ini berfungsi secara konsisten merentas berbilang penyemak imbas, termasuk Chrome, Mozilla dan Internet Explorer.

Atas ialah kandungan terperinci Mengapa Atribut `onerror` untuk Imej Berkelakuan Berbeza dalam Chrome dan Mozilla?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!