JavaScript legt die Standardbildanzeige fest, indem es onerror anstelle des alt_javascript-Tricks verwendet

JavaScript-Code

　//图像加载出错时的处理
function errorImg(img) {
img.src = "默认图片.jpg";
img.onerror = null;
}

HTML-Code

<img  src="/static/imghwm/default1.png"  data-src="1.jpg"  class="lazy"     style="max-width:90%"  style="max-width:90%"  onerror="errorImg(this)" / alt="JavaScript legt die Standardbildanzeige fest, indem es onerror anstelle des alt_javascript-Tricks verwendet" >

Der Schönheit halber wird das Kreuzbild nicht angezeigt, wenn das Webseitenbild nicht vorhanden ist

Wenn die Seite angezeigt wird und das Bild verschoben wird oder verloren geht, wird auf der Seite ein Bild mit einem X angezeigt, was sich stark auf die Benutzererfahrung auswirkt. Selbst wenn das Alt-Attribut verwendet wird, um die Meldung „Bild XX“ anzuzeigen, hat dies keine große Wirkung.
Tatsächlich kann es so gehandhabt werden: Wenn das Bild nicht existiert, wird das onerror-Ereignis ausgelöst. Wir können in diesem Fall einige Abhilfemaßnahmen ergreifen, wie zum Beispiel:

1. Lassen Sie dieses Bildelement ausblenden:

为了美观当网页图片不存在时不显示叉叉图片 src="图片的url地址" alt="图片XX" onerror="this.style.display='none'"/>

2. Ersetzen Sie es durch das Standardbild:

为了美观当网页图片不存在时不显示叉叉图片 src="图片的url地址" alt="图片XX" 
onerror="this.src='默认图片的url地址'"/>

Hinweis: Bei unsachgemäßer Verwendung führt es in IE-basierten Browsern zu einer Endlosschleife. Beispiel: Wenn die [URL-Adresse des Standardbilds] nicht geladen werden kann (z. B. wenn die Netzwerkgeschwindigkeit relativ langsam ist) oder nicht vorhanden ist, wird sie wiederholt geladen, was schließlich zu einem Stapelüberlauffehler führt.

Daher müssen die folgenden zwei Methoden verwendet werden, um das Problem zu lösen:

a. Ändern Sie den Fehlercode in andere Verarbeitungsmethoden oder stellen Sie sicher, dass das Standardbild in onerror ist klein genug und existiert.

b. Um zu steuern, dass das onerror-Ereignis nur einmal ausgelöst wird, müssen Sie diesen Satz hinzufügen: this.onerror=null; Nach dem Hinzufügen lautet er wie folgt:

为了美观当网页图片不存在时不显示叉叉图片 src="图片的url地址" alt="图片XX" 
onerror="this.src='默认图片的url地址;this.onerror=null'"/>

Nach dem Testen wird die obige Methode in allen Versionen von IE und Google- und Firefox-Browsern unterstützt.

Das Obige zeigt, wie JavaScript onerror verwendet, um die Standardbildanzeige anstelle der alt_javascript-Technik festzulegen. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).