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

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>

<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>

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!