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
Freigeben: 2024-12-16 21:58:14
Original
233 Leute haben es durchsucht

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;
}
Nach dem Login kopieren

Implementieren Sie diese Funktion im HTML:

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

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';" />
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage