Warum schlägt mein Code zum Ersetzen von Onerror-Bildern in Chrome und Mozilla fehl?

Verwendung des onerror-Attributs für Bilder

Das onerror-Attribut gibt eine Aktion an, die ausgeführt werden soll, wenn ein Bild nicht geladen werden kann. In diesem Fall haben Sie Code bereitgestellt, um das src-Attribut zu ändern und das fehlerhafte Bild durch ein Standardbild zu ersetzen.

Sie sind jedoch auf ein Problem gestoßen, bei dem dieser Code in Chrome und Mozilla nicht funktioniert, obwohl er im IE funktioniert.

Die Antwort liegt darin, dass moderne Browser das Fehlerereignis mehrfach auslösen, wenn auch die im onerror-Handler bereitgestellte Backup-URL ungültig ist. Dies führt zu einer Endlosschleife, da das Ereignis wiederholt ausgelöst wird und das src-Attribut weiterhin geändert wird.

Um dieses Problem zu beheben, können Sie Ihren Code wie folgt ändern:

<img src="invalid_link" onerror="this.onerror=null;this.src='https://placeimg.com/200/300/animals';">

By Wenn Sie this.onerror=null setzen, verhindern Sie, dass das Fehlerereignis erneut ausgelöst wird. Dadurch wird wiederum sichergestellt, dass das Bild nicht endlos ersetzt wird.

Sie können sich auch die Live-Demo unter http://jsfiddle.net/oLqfxjoz/ ansehen, um die Implementierung zu visualisieren.

Das obige ist der detaillierte Inhalt vonWarum schlägt mein Code zum Ersetzen von Onerror-Bildern in Chrome und Mozilla fehl?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!