Überprüfen Sie, ob ein Bild geladen wird (keine Fehler) in JavaScript

stimmen
185

Ich verwende JavaScript mit der Bibliothek jQuery Bild Thumbnails in einer ungeordneten Liste enthalten ist, zu manipulieren. Wenn das Bild geladen ist es ist eine Sache, wenn ein Fehler es etwas anderes tut auftritt. Ich bin mit jQuery load () und Fehler () -Methoden als Ereignisse. Nach diesen Ereignissen prüfe ich das Bild DOM - Element für das Das Gesamt das Bild , um sicherzustellen , schon wurde nicht geladen , bevor jQuery die Ereignisse registrieren konnte.

Es funktioniert richtig , außer wenn ein Fehler auftritt , bevor jQuery die Ereignisse registrieren. Die einzige Lösung , die ich denken kann, ist das img zu verwenden onerror irgendwo global eine „Flagge“ speichern Attribut (oder auf dem Knoten ist es selbst) , die sagt , es versäumt , dies kann jQuery überprüfen, ob „store / node“ , wenn Das Gesamt überprüfen.

Wer eine bessere Lösung?

Edit: Bolded wichtigste Punkte und zusätzliche Extra Detail unten: Ich überprüfe , ob ein Bild abgeschlossen ist (aka geladen) , nachdem ich eine Last und Fehlerereignis auf dem Bild hinzufügen. Auf diese Weise, wenn das Bild geladen wurde , bevor die Ereignisse registriert wurden, werde ich noch wissen. Wenn das Bild nicht nach den Ereignissen geladen wird , dann werden die Ereignisse darum kümmern , wenn es funktioniert. Das Problem dabei ist, kann ich einfach überprüfen , ob bereits ein Bild geladen ist, aber ich kann nicht sagen , ob ein Fehler aufgetreten ist, statt.

Veröffentlicht am 30/12/2009 um 01:58
quelle vom benutzer
In anderen Sprachen...                            


15 antworten

stimmen
191

Ü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;
}
Beantwortet am 30/12/2009 um 02:05
quelle vom benutzer

stimmen
220

Eine weitere Option ist die zum Auslösen onloadund / oder onerrorEreignisse , die von einer in dem Speicherbildelement zu schaffen und seine Umgebung srcAttributs zu dem ursprünglichen srcAttribute des Originalbildes. 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!

Beantwortet am 30/12/2009 um 02:59
quelle vom benutzer

stimmen
1

Wie ich die Die Gesamt Eigenschaft ist nicht-Standard verstehen. Es kann nicht universell sein ... Ich merke, es scheint anders in Firefox Verse IE zu arbeiten. Ich bin eine Reihe von Bildern in Javascript Laden dann, wenn eine vollständige Überprüfung. In Firefox, scheint dies zu funktionieren groß. In IE, es funktioniert nicht, weil die Bilder auf einem anderen Thread zu laden erscheinen. Es funktioniert nur, wenn ich eine Verzögerung zwischen meiner Aufgabe gestellt image.src und wenn ich die image.complete Eigenschaft überprüfen.

Mit image.onload und image.onerror arbeitet nicht für mich, entweder, weil ich einen Parameter übergeben muß, um zu wissen, welches Bild ich rede, wenn die Funktion aufgerufen wird. Jede Art und Weise, dies zu tun scheint zu scheitern, weil es scheint, tatsächlich die gleiche Funktion zu übergeben, nicht unterschiedliche Instanzen derselben Funktion. So ist der Wert, den ich in ihn passieren zu identifizieren, um das Bild immer endet als der letzte Wert in der Schleife. Ich kann mich keinen Weg, um dieses Problem.

Auf Safari und Chrome, ich sehe die image.complete wahr und die naturalWidth gesetzt, auch wenn die Fehler-Konsole 404 für das Bild zeigt ... und ich entfernt absichtlich das Bild um dies zu testen. Aber die oben genannten Arbeiten auch für Firefox und IE.

Beantwortet am 28/10/2011 um 16:31
quelle vom benutzer

stimmen
2

Das ist, wie ich es Cross-Browser zu arbeiten, über eine Kombination der Verfahren (I auch Bilder benötigen dynamisch in das 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 Zustand für die ISIE Variable liefern.

Beantwortet am 30/03/2013 um 20:01
quelle vom benutzer

stimmen
14

Ich habe versucht, viele verschiedene Möglichkeiten, und auf diese Weise ist die einzige für mich gearbeitet

//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önnten auch eine Callback - Funktion ausgelöst hinzufügen , sobald alle Bilder im DOM und fertig geladen werden. Dies gilt für Bilder auch dynamisch hinzugefügt. http://jsfiddle.net/kalmarsh80/nrAPk/

Beantwortet am 31/07/2013 um 02:15
quelle vom benutzer

stimmen
3

Echtzeit - Netzwerk - Detektor - überprüft Netzwerk - Status , ohne die Seite zu aktualisieren: (es ist nicht Jquery, aber getestet und 100% funktioniert: (getestet auf 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 verloren drücken Sie einfach die Taste erneut.

Update 1: Automatische Erkennung ohne die Seite zu 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>
Beantwortet am 16/10/2013 um 15:46
quelle vom benutzer

stimmen
11

Verwenden Sie imagesLoadedJavaScript - Bibliothek .

Verwendbar mit einfachen Javascript und als jQuery-Plugin.

Eigenschaften:

Ressourcen

Beantwortet am 13/11/2013 um 17:58
quelle vom benutzer

stimmen
2

die interessanten Lösungen auf dieser Seite nach der Lektüre habe ich eine einfach zu bedienende Lösung stark von SLaks' und Noyo der Post beeinflusste, die Arbeit an ziemlich neuere Versionen (ab Schreiben) von Chrome, IE, Firefox, Safari zu sein scheint, und Opera (alle auf Windows). Außerdem arbeitete sie auf einem iPhone / iPad-Emulator I verwendet.

Ein wesentlicher Unterschied zwischen dieser Lösung und SLaks und Noyo des Beitrag ist, dass diese Lösung vor allem überprüft die naturalWidth und naturalHeight Eigenschaften. Ich habe, dass in den aktuellen Browser-Versionen zu finden, diese beiden Eigenschaften die nützlichsten und konsistente Ergebnisse zu liefern scheinen.

Dieser Code gibt TRUE zurück, wenn hat ein Bild vollständig und erfolgreich geladen. Es gibt FALSE zurück, wenn ein Bild entweder noch nicht vollständig geladen hat oder nicht hat zu laden.

Eine Sache, die Sie benötigen, um sich bewusst sein, dass diese Funktion auch FALSE zurückgeben, wenn das Bild ein Bild 0x0 Pixel. Aber diese Bilder sind sehr selten, und ich kann nicht glauben, von einem sehr nützlichen Fall, dass Sie würde überprüfen, um zu sehen, ob ein 0x0 Pixel-Bild noch geladen ist :)

Zuerst legen wir eine neue Funktion „isLoaded“ den HTMLImageElement Prototyp genannt, so dass die Funktion auf jedem 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;

};

Dann müssen wir jederzeit den Ladezustand des Bildes überprüfen, rufen wir einfach die „isLoaded“ -Funktion.

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

Per Kommentar des giorgian auf SLaks' und Noyo der Post, diese Lösung wahrscheinlich nur als eine einmalige Überprüfung auf Mobile Safari verwendet werden, wenn Sie auf die Veränderung der SRC-Attribut planen. Sie können jedoch durch die Schaffung eines Bildelements mit einem neuen SRC das umgehen Attribut anstelle der Änderung des SRC-Attribut auf einem vorhandenen Bildelement.

Beantwortet am 28/07/2015 um 17:53
quelle vom benutzer

stimmen
0

Diese Verwendung von JavaScriptCode können Sie die Bild überprüfen erfolgreich geladen ist 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 diese

Beantwortet am 04/12/2015 um 11:53
quelle vom benutzer

stimmen
42

Basierend auf meinem Verständnis von der W3C HTML - Spezifikation für das imgElement , sollten Sie in der Lage sein , dies zu tun , um eine Kombination aus der Verwendung completeund naturalHeightAttribute, etwa so:

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

Von der Spezifikation für das completeAttribut:

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

  • Das src-Attribut wird weggelassen.
  • Die letzte Aufgabe, die von der Netzwerkquelle Aufgabe Warteschlange gestellt wird, sobald die Ressource wurde eine Warteschlange eingereiht wurde, geholt.
  • Das img-Element ist vollständig verfügbar.
  • Das img Element gebrochen ist.

Andernfalls muss das Attribut false zurück.

So im Wesentlichen, completegibt true zurück , wenn das Bild entweder fertig geladen hat, oder nicht geladen. Da wollen wir nur den Fall, dass das Bild erfolgreich geladen müssen wir das überprüfen nauturalHeightals auch Attribut:

Die IDL - Attribute naturalWidthund naturalHeightmuss die intrinsische Breite und Höhe des Bildes, in CSS Pixel zurückzukehren, wenn das Bild vorhanden ist, sonst 0 ist .

Und availableist wie so definiert:

Ein img is