Mengapa Atribut Onerror untuk Elemen Imej Berkelakuan Tidak Konsisten Merentasi Pelayar?

Linda Hamilton
Lepaskan: 2024-11-04 10:22:29
asal
481 orang telah melayarinya

Why Does the onerror Attribute for Image Elements Behave Inconsistently Across Browsers?

Menggunakan Atribut onerror untuk Elemen Imej

Dalam HTML, atribut onerror membolehkan anda menentukan tindakan yang perlu diambil apabila imej gagal untuk memuatkan. Walau bagaimanapun, telah diperhatikan bahawa atribut ini tidak selalu berfungsi seperti yang diharapkan dalam penyemak imbas tertentu.

Dalam contoh yang diberikan, apabila atribut onerror digunakan untuk menukar sumber imej yang rosak, tingkah laku berbeza merentas penyemak imbas . Untuk menangani isu ini, pendekatan yang diubah suai diperlukan.

Coretan kod yang dikemas kini di bawah menyelesaikan isu dalam Chrome dan Mozilla sambil mengekalkan keserasian dengan IE:

<code class="css">.posting-logo-div {
}
.posting-logo-img {
  height: 120px;
  width: 120px;
}
.posting-photo-div {
  height: 5px;
  width: 5px;
  position: relative;
  top: -140px;
  left: 648px;
}
.posting-photo-img {
  height: 240px;
  width: 240px;
}</code>
Salin selepas log masuk
<code class="html"><div id="image" class="posting-logo-div">
  <img src="invalid_link"
       onerror="this.onerror=null;this.src='https://placeimg.com/200/300/animals';"
   class="posting-logo-img"
  />
</div>
<div id="photo" class="posting-photo-div">
  <img src="invalid_link"
       onerror="this.onerror=null;this.src='https://placeimg.com/200/300/animals';"
       class="posting-photo-img"
  />
</div></code>
Salin selepas log masuk

Dengan membatalkan pengendali onerror menggunakan this.onerror=null; sebelum menukar sumber imej, kita boleh menghalang gelung tak terhingga yang boleh berlaku jika URL sandaran juga tidak sah.

Demonstrasi langsung pendekatan ini boleh didapati di: http://jsfiddle.net/oLqfxjoz/

Atas ialah kandungan terperinci Mengapa Atribut Onerror untuk Elemen Imej Berkelakuan Tidak Konsisten Merentasi 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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan