Überprüfen Sie, ob ein Bild mit jQuery geladen ist (keine Fehler)

Ich verwende JavaScript mit der jQuery-Bibliothek, um Bildminiaturen zu bearbeiten, die in einer ungeordneten Liste enthalten sind. Wenn das Bild geladen wird, macht es eine Sache, wenn ein Fehler auftritt, macht es etwas anderes. Ich verwende jQuery load()und error()Methoden als Ereignisse. Nach diesen Ereignissen überprüfe ich das Image-DOM-Element auf .complete, um sicherzustellen, dass das Image noch nicht geladen wurde, bevor jQuery die Ereignisse registrieren konnte.

Es funktioniert ordnungsgemäß, außer wenn ein Fehler auftritt, bevor jQuery die Ereignisse registrieren kann. Die einzige Lösung, die ich mir vorstellen kann, besteht darin, das img- onerrorAttribut zu verwenden, um irgendwo global (oder auf dem Knoten selbst) ein "Flag" zu speichern, das besagt, dass es fehlgeschlagen ist, damit jQuery dieses "store / node" überprüfen kann, wenn .complete überprüft wird.

Hat jemand eine bessere Lösung?

Bearbeiten: Fettgedruckte Hauptpunkte und zusätzliche Details unten: Ich überprüfe, ob ein Bild vollständig ist (auch bekannt als geladen), nachdem ich dem Bild ein Lade- und Fehlerereignis hinzugefügt habe. Auf diese Weise weiß ich immer noch , ob das Bild vor der Registrierung der Ereignisse geladen wurde. Wenn das Bild nach den Ereignissen nicht geladen wird, kümmern sich die Ereignisse darum, wenn dies der Fall ist. Das Problem dabei ist, dass ich leicht überprüfen kann, ob ein Bild bereits geladen ist, aber nicht feststellen kann, ob stattdessen ein Fehler aufgetreten ist.

Eine andere Möglichkeit besteht darin, die Ereignisse onloadund / oder onerrorEreignisse auszulösen, indem ein Bildelement im Speicher erstellt und sein srcAttribut auf das ursprüngliche srcAttribut des Originalbilds gesetzt wird. Hier ist ein Beispiel dafür, 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!

Überprüfen Sie die completeund naturalWidthEigenschaften, die in dieser Reihenfolge.

https://stereochro.me/ideas/detecting-broken-images-js

function IsImageOk(img) {
    // During the onload event, IE correctly identifies any images that
    // weren’t downloaded as not complete. Others should too. Gecko-based
    // browsers act like NS4 in that they report this incorrectly.
    if (!img.complete) {
        return false;
    }

    // However, they do have two very useful properties: naturalWidth and
    // naturalHeight. These give the true size of the image. If it failed
    // to load, either of these should be zero.
    if (img.naturalWidth === 0) {
        return false;
    }

    // No other way of checking: assume it’s ok.
    return true;
}

Basierend auf meinem Verständnis der W3C-HTML-Spezifikation für das imgElement sollten Sie in der Lage sein, dies mithilfe einer Kombination der Attribute completeund zu tun naturalHeight, wie folgt:

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

Aus der Spezifikation für das completeAttribut:

Das IDL-Attribut complete muss true zurückgeben, wenn eine der folgenden Bedingungen erfüllt ist:

• Das src-Attribut wird weggelassen.
• Die letzte Aufgabe, die von der Quelle der Netzwerkaufgabe in die Warteschlange gestellt wird, nachdem die Ressource abgerufen wurde, wurde in die Warteschlange gestellt.
• Das img-Element ist vollständig verfügbar.
• Das img-Element ist defekt.

Andernfalls muss das Attribut false zurückgeben.

Gibt also im Wesentlichen completetrue zurück, wenn das Bild entweder vollständig geladen wurde oder nicht geladen werden konnte. Da wir nur den Fall wollen, in dem das Bild erfolgreich geladen wurde, müssen wir auch das nauturalHeightAttribut überprüfen :

Die IDL-Attribute naturalWidthund naturalHeightmüssen die intrinsische Breite und Höhe des Bildes in CSS-Pixeln zurückgeben, wenn das Bild verfügbar ist, oder 0.

Und availableist so definiert:

Ein Bild befindet sich immer in einem der folgenden Zustände:

• Nicht verfügbar - Der Benutzeragent hat keine Bilddaten erhalten.
• Teilweise verfügbar - Der Benutzeragent hat einige der Bilddaten erhalten.
• Vollständig verfügbar - Der Benutzeragent hat alle Bilddaten erhalten und mindestens die Bildabmessungen sind verfügbar.
• Defekt - Der Benutzeragent hat alle Bilddaten erhalten, die er kann, aber er kann das Bild nicht einmal genug dekodieren, um die Bildabmessungen zu erhalten (z. B. ist das Bild beschädigt oder das Format wird nicht unterstützt oder es konnten keine Daten abgerufen werden). .

Wenn sich ein img-Element entweder im teilweise verfügbaren Zustand oder im vollständig verfügbaren Zustand befindet, wird es als verfügbar bezeichnet.

Wenn das Bild also "defekt" ist (nicht geladen werden konnte), befindet es sich im defekten Zustand, nicht im verfügbaren Zustand, also naturalHeightist es 0.

Daher imgElement.complete && imgElement.naturalHeight !== 0sollte uns bei der Überprüfung mitgeteilt werden, ob das Bild erfolgreich geladen wurde.

Weitere Informationen hierzu finden Sie in der W3C-HTML-Spezifikation für das imgElement oder in MDN .

Ich habe viele verschiedene Wege ausprobiert und dieser Weg ist der einzige, der für mich funktioniert hat

//check all images on the page
$('img').each(function(){
    var img = new Image();
    img.onload = function() {
        console.log($(this).attr('src') + ' - done!');
    }
    img.src = $(this).attr('src');
});

Sie können auch eine Rückruffunktion hinzufügen, die ausgelöst wird, sobald alle Bilder in das DOM geladen und bereit sind. Dies gilt auch für dynamisch hinzugefügte Bilder. http://jsfiddle.net/kalmarsh80/nrAPk/

Verwenden Sie die imagesLoadedJavascript-Bibliothek .

Verwendbar mit einfachem Javascript und als jQuery-Plugin.

Eigenschaften:

• offiziell unterstützt von IE8 +
• Lizenz: MIT
• Abhängigkeiten: keine
• Gewicht (minimiert & gezippt): 7kb minimiert (leicht!)

Ressourcen

• Projekt auf Github: https://github.com/desandro/imagesloaded
• Offizielle Website: http://imagesloaded.desandro.com/
• /programming/26927575/why-use-imagesloaded-javascript-library-versus-jquerys-window-load
• Bildgeladene Javascript-Bibliothek: Was unterstützt der Browser und das Gerät?

Abrufen von Informationen von Bildelementen auf der Seite
Testen der Arbeit mit Chrome und Firefox
Working jsFiddle (öffnen Sie Ihre Konsole, um das Ergebnis anzuzeigen )

$('img').each(function(){ // selecting all image element on the page

    var img = new Image($(this)); // creating image element

    img.onload = function() { // trigger if the image was loaded
        console.log($(this).attr('src') + ' - done!');
    }

    img.onerror = function() { // trigger if the image wasn't loaded
        console.log($(this).attr('src') + ' - error!');
    }

    img.onAbort = function() { // trigger if the image load was abort
        console.log($(this).attr('src') + ' - abort!');
    }

    img.src = $(this).attr('src'); // pass src to image object

    // log image attributes
    console.log(img.src);
    console.log(img.width);
    console.log(img.height);
    console.log(img.complete);

});

Hinweis: Ich habe jQuery verwendet . Ich dachte, dies kann mit vollständigem Javascript erreicht werden

Ich finde hier gute Informationen OpenClassRoom -> dies ist ein französisches Forum

Echtzeit-Netzwerkdetektor - Überprüfen Sie den Netzwerkstatus, ohne die Seite zu aktualisieren: aktualisieren (Es ist keine Abfrage, aber getestet und funktioniert zu 100%: (getestet in Firefox v25.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 unterbrochen wird, drücken Sie einfach die Taste Erneut.

Update 1: Automatische Erkennung ohne Aktualisierung der Seite:

<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>

Nachdem ich die interessanten Lösungen auf dieser Seite gelesen hatte, erstellte ich eine benutzerfreundliche Lösung, die stark von SLaks und Noyos Beitrag beeinflusst war und anscheinend an ziemlich aktuellen Versionen (zum Zeitpunkt des Schreibens) von Chrome, IE, Firefox, Safari und Opera (alles unter Windows). Es funktionierte auch auf einem iPhone / iPad-Emulator, den ich verwendet habe.

Ein Hauptunterschied zwischen dieser Lösung und SLaks und Noyos Beitrag besteht darin, dass diese Lösung hauptsächlich die Eigenschaften naturalWidth und naturalHeight überprüft. Ich habe festgestellt, dass diese beiden Eigenschaften in den aktuellen Browserversionen die hilfreichsten und konsistentesten Ergebnisse liefern.

Dieser Code gibt TRUE zurück, wenn ein Bild vollständig UND erfolgreich geladen wurde. Es gibt FALSE zurück, wenn ein Bild entweder noch nicht vollständig geladen wurde oder nicht geladen werden konnte.

Eine Sache, die Sie beachten müssen, ist, dass diese Funktion auch FALSE zurückgibt, wenn das Bild ein 0x0-Pixel-Bild ist. Aber diese Bilder sind ziemlich ungewöhnlich und ich kann mir keinen sehr nützlichen Fall vorstellen, in dem Sie überprüfen möchten, ob ein 0x0-Pixel-Bild bereits geladen wurde :)

Zuerst fügen wir dem HTMLImageElement-Prototyp eine neue Funktion mit dem Namen "isLoaded" hinzu, damit die Funktion für jedes Bildelement verwendet werden kann.

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;

};

Jedes Mal, wenn wir den Ladestatus des Bildes überprüfen müssen, rufen wir einfach die Funktion "isLoaded" auf.

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

Laut Giorgians Kommentar zum Beitrag von SLaks und Noyo kann diese Lösung wahrscheinlich nur als einmalige Überprüfung von Safari Mobile verwendet werden, wenn Sie vorhaben, das SRC-Attribut zu ändern. Sie können dies jedoch umgehen, indem Sie ein Bildelement mit einem neuen SRC-Attribut erstellen, anstatt das SRC-Attribut für ein vorhandenes Bildelement zu ändern.

So habe ich es geschafft, browserübergreifend mit einer Kombination der oben genannten Methoden zu arbeiten (ich musste auch Bilder dynamisch in den Dom einfügen):

$('#domTarget').html('<img src="" />');

var url = '/some/image/path.png';

$('#domTarget img').load(function(){}).attr('src', url).error(function() {
    if ( isIE ) {
       var thisImg = this;
       setTimeout(function() {
          if ( ! thisImg.complete ) {
             $(thisImg).attr('src', '/web/css/img/picture-broken-url.png');
          }
       },250);
    } else {
       $(this).attr('src', '/web/css/img/picture-broken-url.png');
    }
});

Hinweis: Sie müssen einen gültigen booleschen Status für die isIE-Variable angeben.

var isImgLoaded = function(imgSelector){
  return $(imgSelector).prop("complete") && $(imgSelector).prop("naturalWidth") !== 0;
}

// Oder als Plugin

    $.fn.extend({
      isLoaded: function(){
        return this.prop("complete") && this.prop("naturalWidth") !== 0;
      }
    })

// $(".myImage").isLoaded() 

Soweit ich weiß, ist die Eigenschaft .complete nicht Standard. Es ist möglicherweise nicht universell ... Ich stelle fest, dass es in Firefox-Versen IE anders zu funktionieren scheint. Ich lade eine Reihe von Bildern in Javascript und überprüfe dann, ob sie vollständig sind. In Firefox scheint dies großartig zu funktionieren. Im IE ist dies nicht der Fall, da die Bilder anscheinend in einen anderen Thread geladen werden. Dies funktioniert nur, wenn zwischen meiner Zuweisung zu image.src und dem Überprüfen der Eigenschaft image.complete eine Verzögerung liegt.

Die Verwendung von image.onload und image.onerror funktioniert auch bei mir nicht, da ich einen Parameter übergeben muss, um zu wissen, um welches Bild es sich handelt, wenn die Funktion aufgerufen wird. Jeder Weg, dies zu tun, scheint zu scheitern, weil er tatsächlich dieselbe Funktion zu übergeben scheint, nicht verschiedene Instanzen derselben Funktion. Der Wert, den ich zur Identifizierung des Bildes eingebe, ist also immer der letzte Wert in der Schleife. Ich kann mir keinen Weg vorstellen, um dieses Problem zu umgehen.

In Safari und Chrome wird image.complete true und naturalWidth festgelegt, auch wenn in der Fehlerkonsole ein 404 für dieses Image angezeigt wird. Ich habe dieses Image absichtlich entfernt, um dies zu testen. Aber das oben genannte funktioniert gut für Firefox und IE.

Dieser Codeausschnitt hat mir geholfen, Probleme beim Zwischenspeichern des Browsers zu beheben:

$("#my_image").on('load', function() {

    console.log("image loaded correctly"); 
}).each(function() {

     if($(this).prop('complete')) $(this).load();
});

Wenn der Browser-Cache deaktiviert ist, funktioniert nur dieser Code nicht:

$("#my_image").on('load', function() {
     console.log("image loaded correctly"); 
})

Damit es funktioniert, müssen Sie Folgendes hinzufügen:

.each(function() {
     if($(this).prop('complete')) $(this).load();
});

Mit diesem JavaScriptCode können Sie überprüfen, ob das 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");
        }
}

Probieren Sie das aus

Ich hatte viele Probleme mit dem vollständigen Laden eines Bildes und des EventListener.

Was auch immer ich versuchte, die Ergebnisse waren nicht zuverlässig.

Aber dann habe ich die Lösung gefunden. Es ist technisch gesehen nicht schön, aber jetzt hatte ich nie ein fehlgeschlagenes Laden des Bildes.

Was ich getan habe:

                    document.getElementById(currentImgID).addEventListener("load", loadListener1);
                    document.getElementById(currentImgID).addEventListener("load", loadListener2);

                function loadListener1()
                    {
                    // Load again
                    }

                function loadListener2()
                {
                    var btn = document.getElementById("addForm_WithImage"); btn.disabled = false;
                    alert("Image loaded");
                }

Anstatt das Bild einmal zu laden, lade ich es direkt nach dem ersten Mal ein zweites Mal und beide laufen durch den Eventhandler.

Alle meine Kopfschmerzen sind weg!

Übrigens: Ihr Jungs von stackoverflow hat mir schon mehr als hundert Mal geholfen. Dafür ein sehr großes Dankeschön!

Dieser hat gut für mich funktioniert :)

$('.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');
});