Wie kann ich defekte Bilder durch JavaScript oder jQuery ersetzen?

Defekte Bilder durch jQuery/JavaScript ersetzen

Defekte Bilder können die Ästhetik Ihrer Webseiten beeinträchtigen und den Benutzern unvollständige oder optisch unattraktive Erlebnisse hinterlassen . Glücklicherweise bieten jQuery und JavaScript Tools, um dieses Problem elegant zu lösen.

jQuery-Ansatz

Während man anfangs vielleicht darüber nachdenkt, jQuery zum Verwalten fehlerhafter Bilder zu verwenden, bietet JavaScript eine einfachere, effektivere Lösung. Durch die Behandlung des onError-Ereignisses für jedes Bild können Sie dessen Quelle neu zuweisen, wenn das Laden fehlschlägt.

JavaScript-Lösung

Der folgende JavaScript-Codeausschnitt erfasst das onError-Ereignis für ein Bildelement, das sein src-Attribut aktualisiert, um ein Platzhalterbild anzuzeigen (z. B. „noimage.gif“).

function imgError(image) {
    image.onerror = "";
    image.src = "/images/noimage.gif";
    return true;
}

<img src="image.png" onerror="imgError(this);"/>

Alternativ können Sie eine prägnantere Syntax ohne separate JavaScript-Funktion verwenden:

<img src="image.png" onError="this.onerror=null;this.src='/images/noimage.gif';" />

Kompatibilität

In der folgenden Tabelle sind die Browser aufgeführt, die die Fehlerfunktion zur Behandlung defekter Dateien unterstützen Bilder:

https://www.quirksmode.org/dom/events/error.html

Das obige ist der detaillierte Inhalt vonWie kann ich defekte Bilder durch JavaScript oder jQuery ersetzen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!