Heim >Web-Frontend >js-Tutorial >Wie kann ich defekte Bilder durch jQuery oder einfaches JavaScript ersetzen?

Wie kann ich defekte Bilder durch jQuery oder einfaches JavaScript ersetzen?

Linda Hamilton
Linda HamiltonOriginal
2024-12-16 21:58:14161Durchsuche

How Can I Replace Broken Images with jQuery or Plain JavaScript?

Defekte Bilder durch jQuery ersetzen

Die Anzeige defekter Bilder auf einer Webseite kann für Benutzer frustrierend sein. Glücklicherweise bietet JavaScript verschiedene Methoden, um dieses Problem zu lösen.

Ein Ansatz besteht darin, die Filterfunktionen von jQuery zu nutzen, um defekte Bilder zu identifizieren und zu ersetzen. Um dies zu tun:

  1. Verwenden Sie den $("img")-Selektor von jQuery, um alle Bilder auf der Seite abzurufen.
  2. Filtern Sie den Bildsatz mit der Funktion .error(), um defekte Bilder zu identifizieren Bilder.
  3. Ersetzen Sie für jedes defekte Bild das src-Attribut durch das gewünschte Ersatzbild, z. B. den Standardwert „kein Bild“. Platzhalter.

Der Einfachheit halber ist es jedoch oft einfacher, reines JavaScript zu verwenden, um fehlerhafte Bilder zu verarbeiten.

JavaScript-Lösung:

Die Das Ereignis onError kann verwendet werden, um das Quellattribut neu zuzuweisen, wenn ein Bild fehlschlägt laden:

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

Implementieren Sie diese Funktion im HTML:

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

Alternativ kann das onError-Ereignis direkt im HTML ohne Funktion behandelt werden:

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

Informationen zur Browserkompatibilität mit dem Fehler finden Sie in der folgenden Tabelle Einrichtung:

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

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn