jQuery/JavaScript zum Ersetzen defekter Bilder

Ich habe eine Webseite, die eine Menge Bilder enthält. Manchmal ist das Bild nicht verfügbar, sodass ein defektes Bild im Browser des Clients angezeigt wird.

Wie verwende ich jQuery, um die Menge der Bilder zu erhalten, sie auf defekte Bilder zu filtern und dann die src zu ersetzen?

--Ich dachte, es wäre einfacher, dies mit jQuery zu machen, aber es stellte sich heraus, dass es viel einfacher war, einfach eine reine JavaScript-Lösung zu verwenden, also die von Prestaul bereitgestellte.

Antwort #1

Behandeln Sie das onError-Ereignis für das Bild, um seine Quelle mit JavaScript neu zuzuweisen:

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

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

Oder ohne eine JavaScript-Funktion:

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

Die folgende Kompatibilitätstabelle listet die Browser auf, die die Fehlerfunktion unterstützen:

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

Antwort #2

Ich verwende den eingebauten error-Handler:

$("img").error(function () {
    $(this).unbind("error").attr("src", "broken.gif");
});

Bearbeiten: Die error()-Methode ist in jQuery 1.8 und höher veraltet. Stattdessen sollten Sie .on("error") verwenden:

$("img").on("error", function () {
    $(this).attr("src", "broken.gif");
});

Antwort #3

Falls jemand wie ich versucht, das error-Ereignis an ein dynamisches HTML-img-Tag anzuhängen, möchte ich darauf hinweisen, dass es einen Haken gibt:

Offenbar blubbern img-Fehlerereignisse in den meisten Browsern nicht, entgegen dem, was der Standard sagt.

Also wird etwas wie folgt nicht funktionieren:

$(document).on('error', 'img', function () { ... })

Ich hoffe, dass dies für jemanden anderen hilfreich sein wird. Ich wünschte, ich hätte das hier in diesem Thread gesehen. Aber ich habe es nicht. Also füge ich es hinzu.

Antwort #4

Hier ist eine eigenständige Lösung:

$(window).load(function() {
  $('img').each(function() {
    if ( !this.complete
    ||   typeof this.naturalWidth == "undefined"
    ||   this.naturalWidth == 0                  ) {
      // image was broken, replace with your new image
      this.src = 'http://www.tranism.com/weblog/images/broken_ipod.gif';
    }
  });
});

Antwort #5

Ich glaube, das ist es, wonach du suchst: jQuery.Preload

Hier ist der Beispielcode aus der Demo, du gibst die Lade- und Nicht-Gefunden-Bilder an und schon bist du startklar:

jQuery('#images img').preload({
  placeholder:'placeholder.jpg',
  notFound:'notfound.jpg'
});

Antwort #6

$(window).bind('load', function() {
  $('img').each(function() {
    if( (typeof this.naturalWidth != "undefined" && this.naturalWidth == 0) 
    ||  this.readyState == 'uninitialized'                                  ) {
        $(this).attr('src', 'missing.jpg');
    }
  });
});

Quelle: http://www.developria.com/2009/03/jquery-quickie---broken-images.html

Antwort #7

Während der OP den SRC ersetzen wollte, bin ich sicher, dass viele Leute, die auf diese Frage stoßen, vielleicht nur das defekte Bild verbergen möchten, in diesem Fall hat diese einfache Lösung bei mir großartig funktioniert.

Verwendung von Inline-JavaScript:

<img src="img.jpg" onerror="this.style.display='none';" />

Verwendung von externem JavaScript:

var images = document.querySelectorAll('img');

for (var i = 0; i < images.length; i++) {
  images[i].onerror = function() {
    this.style.display='none';
  }
}

<img src='img.jpg' />

Verwendung von modernem externem JavaScript:

document.querySelectorAll('img').forEach((img) => {
  img.onerror = function() {
    this.style.display = 'none';
  }
});

<img src='img.jpg' />

Siehe Browser-Unterstützung für NodeList.forEach und Pfeilfunktionen.

Antwort #8

Hier ist eine schnelle und schmutzige Methode, um alle kaputten Bilder zu ersetzen, und es ist nicht notwendig, den HTML-Code zu ändern ;)

Codepen-Beispiel

    $("img").each(function(){
        var img = $(this);
        var image = new Image();
        image.src = $(img).attr("src");
        var no_image = "https://dummyimage.com/100x100/7080b5/000000&text=No+image";
        if (image.naturalWidth == 0 || image.readyState == 'uninitialized'){
            $(img).unbind("error").attr("src", no_image).css({
                height: $(img).css("height"),
                width: $(img).css("width"),
            });
        }
  });

Antwort #9

Das ist eine beschissene Technik, aber sie ist so gut wie garantiert:

<img onerror="this.parentNode.removeChild(this);">