Wie kann ich mit jQuery oder JavaScript effizient mit defekten Bildern auf meinen Webseiten umgehen?

Umgang mit defekten Bildern mit jQuery oder JavaScript

Problem:
Eine Webseite mit zahlreichen Bildern ist defekt Bildinstanzen wegen Nichtverfügbarkeit.

jQuery Vorgehensweise:

1. Erfassen Sie die Bildelemente: $("img").
2. Fehlerhafte Bilder filtern: $brokenImages = $("img").filter(function( ) { return this.complete && !this.naturalWidth }).
3. Ersetzen Sie die Eigenschaft „src“ durch ein Platzhalterbild: $brokenImages.attr("src", "/broken-image.png").

JavaScript onError Event:

Ein alternativer Ansatz beinhaltet die Behandlung von onError-Ereignis für jedes Bild, um seine Quelle direkt neu zuzuweisen.

1. Definieren Sie eine Bildfehlerbehandlung Funktion:

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

2. Verwenden Sie die Funktion in HTML:

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

3. Oder ohne Funktion:

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

Browserkompatibilität:

Für die Informationen zum Umgang mit Fehlerereignissen finden Sie in der Kompatibilitätstabelle unter:

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

Das obige ist der detaillierte Inhalt vonWie kann ich mit jQuery oder JavaScript effizient mit defekten Bildern auf meinen Webseiten umgehen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!