Prüfen Sie, ob ein Bild geladen wurde (keine Fehler) mit jQuery

Eine weitere option ist das auslösen der onload - und/oder onerror Veranstaltungen durch die Schaffung einer in-memory-image-element und die Einstellung seiner src Attribut der original src Attribut des ursprünglichen Bildes. Hier ist ein Beispiel was ich meine:

$("<img/>")
    .on('load', function() { console.log("image loaded correctly"); })
    .on('error', function() { console.log("error loading image"); })
    .attr("src", $(originalImage).attr("src"))
;

Hoffe, das hilft!

Basiert auf meinem Verständnis von der W3C-HTML-Spezifikation für das img - element, Sie sollten in der Lage sein, dies zu tun mit einer Kombination des complete und naturalHeight Attribute, etwa so:

function imgLoaded(imgElement) {
  return imgElement.complete && imgElement.naturalHeight !== 0;
}

Aus der Spezifikation für die complete Attribut:

Den IDL-Attribut abschließen muss true zurückgeben, wenn eine der folgenden
Bedingungen erfüllt ist:

• Das src-Attribut ist weggelassen.
• Die Letzte Aufgabe, die in der Warteschlange befindet, die von der networking-Aufgabe, source, sobald die Ressource abgerufen wurde in die Warteschlange eingereiht wurde.
• Das img-element ist vollständig vorhanden.
• Das img-element ist kaputt.

Sonst muss das Attribut den Wert false zurück.

Also im wesentlichen complete gibt true zurück, wenn das Bild entweder vollständig geladen oder nicht geladen werden konnte. Da wollen wir nur den Fall, wo das Bild erfolgreich geladen wurde, müssen wir überprüfen Sie die nauturalHeight Attribut als auch:

Die IDL-Attribute naturalWidth und naturalHeight zurück
intrinsische Breite und Höhe des Bildes in CSS-Pixel, wenn das Bild
verfügbar ist, sonst 0.

Und verfügbar ist definiert wie folgt:

Ein img ist immer in einem der folgenden Staaten:

• Nicht verfügbar - Der user-agent noch nicht erhalten jede Bild-Daten.
• Teilweise verfügbar - Der user-agent erhalten hat, einige der Bilddaten.
• Komplett zur Verfügung - Der user-agent hat gewonnen alle von den Bilddaten und zumindest die Bild-Abmessungen sind verfügbar.
• Gebrochen - Der user-agent hat gewonnen alle von Bilddaten, die es können, aber nicht selbst decodieren des Bilds genug, um das image
  Dimensionen (z.B. das Bild ist beschädigt oder das format wird nicht
  unterstützt oder konnten keine Daten erhalten werden).

Wenn ein img-element entweder in der teilweise zur Verfügung Stand oder in
die komplett zur Verfügung Stand, soll es verfügbar sein.

Also, wenn das Bild "broken" (Fehler beim laden), dann wird es in den kaputten Staat, nicht die zur Verfügung Stand, so naturalHeight 0.

Daher, die überprüfung imgElement.complete && imgElement.naturalHeight !== 0 sollte uns sagen, ob das Bild erfolgreich geladen wurde.

Lesen Sie mehr dazu in der W3C-HTML-Spezifikation für das img - element, oder auf MDN.

Verwenden imagesLoaded javascript-Bibliothek.

Verwendbar mit plain Javascript und als jQuery-plugin.

Features:

• offiziell unterstützt IE8+
• Lizenz: MIT
• Abhängigkeiten: keine
• Gewicht (minified & Gzip) : 7kb minified (Licht!)

Ressourcen

• Projekt auf github: https://github.com/desandro/imagesloaded
• Offizielle website: http://imagesloaded.desandro.com/
• https://stackoverflow.com/questions/26927575/why-use-imagesloaded-javascript-library-versus-jquerys-window-load
• imagesloaded javascript-Bibliothek: was ist der browser - & device support?

Echtzeit-Netzwerk-Detektor - check network status, ohne die Seite aktualisieren:
(es ist nicht von jquery, ist aber getestet und 100% funktioniert:(getestet auf Firefox Version 25.0))

Code:

<script>
 function ImgLoad(myobj){
   var randomNum = Math.round(Math.random() * 10000);
   var oImg=new Image;
   oImg.src="YOUR_IMAGELINK"+"?rand="+randomNum;
   oImg.onload=function(){alert('Image succesfully loaded!')}
   oImg.onerror=function(){alert('No network connection or image is not available.')}
}
window.onload=ImgLoad();
</script>

<button id="reloadbtn" onclick="ImgLoad();">Again!</button>

wenn die Verbindung verloren, nur drücken Sie die Schaltfläche Erneut.

Update 1:
Auto detect, ohne die Seite aktualisieren:

<script>
     function ImgLoad(myobj){
       var randomNum = Math.round(Math.random() * 10000);
       var oImg=new Image;
       oImg.src="YOUR_IMAGELINK"+"?rand="+randomNum;
       oImg.onload=function(){networkstatus_div.innerHTML="";}
       oImg.onerror=function(){networkstatus_div.innerHTML="Service is not available. Please check your Internet connection!";}
}

networkchecker = window.setInterval(function(){window.onload=ImgLoad()},1000);
</script>

<div id="networkstatus_div"></div>

Nach dem Lesen der interessanten Lösungen auf dieser Seite, ich habe eine easy-to-use-Lösung stark beeinflusst von SLaks' und Noyo ' s Beitrag, scheint zu funktionieren auf ziemlich aktuellen Versionen (wie Sie schreiben) von Chrome, IE, Firefox, Safari, Opera und Chrome (alle unter Windows). Auch, es funktionierte auf einem iPhone/iPad-emulator die ich verwendet habe.

Einen großen Unterschied zwischen dieser Lösung und SLaks und Noyo ' s post ist, dass diese Lösung vor allem überprüft die naturalWidth und naturalHeight Eigenschaften. Ich habe festgestellt, dass in den aktuellen browser-Versionen, diese beiden Eigenschaften scheinen die meisten hilfreich und konsistente Ergebnisse.

Dieser code gibt TRUE zurück, wenn ein Bild geladen wurde, voll UND erfolgreich. Es gibt FALSE zurück, wenn entweder ein Bild hat nicht geladen noch voll ODER Fehler beim laden.

Eine Sache, die Sie müssen sich bewusst sein, dass diese Funktion auch FALSE zurückgeben, wenn das Bild ist ein 0x0 pixel großes Bild. Aber die Bilder sind ziemlich ungewöhnlich, und ich kann nicht glauben, eine sehr nützliche Fall, wo Sie möchten, um zu überprüfen, um zu sehen, ob ein 0x0 pixel großes Bild geladen wurde, noch nicht 🙂

Zuerst legen wir eine neue Funktion namens "isLoaded" der HTMLImageElement Prototyp, so dass die Funktion auf jedem Bild-element.

HTMLImageElement.prototype.isLoaded = function() {

    //See if "naturalWidth" and "naturalHeight" properties are available.
    if (typeof this.naturalWidth == 'number' && typeof this.naturalHeight == 'number')
        return !(this.naturalWidth == 0 && this.naturalHeight == 0);

    //See if "complete" property is available.
    else if (typeof this.complete == 'boolean')
        return this.complete;

    //Fallback behavior: return TRUE.
    else
        return true;

};

Dann, jedes mal, wenn wir brauchen, um zu überprüfen, die den lade-status des Bildes, wir rufen die "isLoaded" - Funktion.

if (someImgElement.isLoaded()) {
    //YAY! The image loaded
}
else {
    //Image has not loaded yet
}

Pro giorgian Kommentar SLaks' und Noyo Beitrag, diese Lösung kann wahrscheinlich nur als one-time-überprüfen Sie auf einer Safari Mobile, wenn Sie planen, ändern Sie das SRC-Attribut. Aber Sie können das umgehen, indem erstellen eines Bild-Elements mit einem neuen SRC-Attribut anstelle der änderung des SRC-Attribut auf eine vorhandene image-element.

So wie ich das verstehe die .complete-Eigenschaft ist nicht-standard. Es kann nicht universell sein... ich merke, es scheint zu funktionieren, anders in Firefox Verse, DH. Ich bin laden eine Reihe von Bildern, die in javascript dann die Kontrolle, wenn abgeschlossen. Im Firefox scheint das gut zu funktionieren. Im IE ist es nicht, weil die Bilder angezeigt werden, geladen zu werden, in einem anderen thread. Es funktioniert nur wenn ich eine Verzögerung zwischen meiner Zuordnung zum Bild.src und wenn ich das Bild.complete-Eigenschaft.

Mit Bild.onload und Bild.onerror nicht für mich arbeiten, entweder, weil ich muss ein parameter übergeben werden, um zu wissen, mit welchem Bild ich spreche, wenn die Funktion aufgerufen wird. Jede Weise, das zu tun, scheint zu scheitern, weil es eigentlich zu gehen scheint, die gleiche Funktion, nicht verschiedene Instanzen der gleichen Funktion. Also der Wert, den ich übergeben, um zu identifizieren, die das Bild immer endet als der Letzte Wert in der Schleife. Ich kann mir nicht vorstellen, dass es eine Möglichkeit, um dieses problem.

Auf Safari und Chrome, sehe ich das Bild.Vollständigkeit, Wahrheit und die naturalWidth gesetzt, selbst wenn der Fehler-Konsole zeigt eine 404 für das Bild... und ich absichtlich entfernt, das Bild zu testen. Aber das oben funktioniert gut für Firefox und IE.

Verwendung dieser JavaScript code können Sie überprüfen Bild erfolgreich geladen wurde oder nicht.

document.onready = function(e) {
        var imageobj = new Image();
        imageobj.src = document.getElementById('img-id').src;
        if(!imageobj.complete){ 
            alert(imageobj.src+"  -  Not Found");
        }
}

Versuchen, diese

Das war gut für mich 🙂

$('.progress-image').each(function(){
    var img = new Image();
    img.onload = function() {
        let imgSrc = $(this).attr('src');
        $('.progress-image').each(function(){
            if($(this).attr('src') == imgSrc){
                console.log($(this).parent().closest('.real-pack').parent().find('.shimmer').fadeOut())
            }
        })
    }
    img.src = $(this).attr('src');
});