Warum verhält sich das onerror-Attribut für Bildelemente in allen Browsern inkonsistent?

Verwenden des onerror-Attributs für Bildelemente

In HTML können Sie mit dem onerror-Attribut eine Aktion angeben, die ausgeführt werden soll, wenn ein Bild fehlschlägt laden. Es wurde jedoch beobachtet, dass dieses Attribut in bestimmten Browsern nicht immer wie erwartet funktioniert.

Im bereitgestellten Beispiel, in dem das onerror-Attribut verwendet wird, um die Quelle fehlerhafter Bilder zu ändern, unterscheidet sich das Verhalten je nach Browser . Um dieses Problem zu beheben, ist ein geänderter Ansatz erforderlich.

Die folgenden aktualisierten Codefragmente beheben das Problem in Chrome und Mozilla und wahren gleichzeitig die Kompatibilität mit 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>

Durch Aufheben des onerror-Handler mit this.onerror=null; Bevor wir die Bildquelle ändern, können wir eine Endlosschleife verhindern, die auftreten könnte, wenn auch die Backup-URL ungültig ist.

Eine Live-Demonstration dieses Ansatzes finden Sie unter: http://jsfiddle.net/oLqfxjoz/

Das obige ist der detaillierte Inhalt vonWarum verhält sich das onerror-Attribut für Bildelemente in allen Browsern inkonsistent?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!