Welche Problemumgehungen gibt es für die Eigenschaft `complete` in FireFox?

Question

Ich versuche mit jQuery festzustellen, ob ein Bild ordnungsgemäß geladen wurde.

Folgende funktioniert gut (und gibt true oder false als der Zustand des Bildes), sondern scheint nur in IE zu arbeiten, in FireFox, so scheint es immer true zurückzukehren - auch wenn der Staat tatsächlich unvollständig ist:

var image = $("img#myImage"); 
    alert(image[0].complete); 

Was ist das Firefox-Äquivalent für image.complete in JavaScript oder jQuery?

Answer 1

Ich weiß nicht, ob Firefox eine andere Stütze hat, eine Methode, die es tut, aber können Sie diese Abhilfe verwenden:

$ (document) .ready (function() {

$("img").each(
//for each image declared in html 
function(index) 
{ 
    document.images[index].complete= false; 
    document.images[index].onload = function(){ this.complete= true}; 
}); 

});

Answer 2

Sie könnten auch die eine der Dimensionen des img Elements zusätzlich zu complete versuchen Überprüfung:

function isImageLoaded() { 
    var theImage = $('#myImage'); 

    if (!theImage.get(0).complete) { 
     return false; 
    } 
    else if (theImage.height() === 0) { 
     return false; 
    } 

    return true; 
} 

Ein entladen img oder ein img mit einem ungültigen src Attribute sollte .height() und .width() gleich 0 hat in Feuerfuchs. In Chrome und Opera scheint keine der beiden Methoden korrekt zu funktionieren. In diesen Browsern theImage.height() immer einen positiven Wert in meinem Test zurückgegeben.

Answer 3

Sie können Last() verwenden, aber Vorsicht vor Internet Explorer: Es wird das Ereignis nicht ausgelöst, wenn das Bild zwischengespeichert wird

if($img[0].readyState === 4){ // image is cached in IE 
    alert("Image loaded!"); 
}else{ 
    $img.load(function(){ // for other browsers and IE, if not cached 
     alert("Image loaded!"); 
    }); 
} 

Answer 4

Ja, ich war gerade auf einer AJAX-Seite arbeiten, die Bilder dynamisch geladen . Ich wollte auch feststellen, ob Bilder geladen sind, damit ich sie mit einem jQuery-Effekt überführen kann.

img = $('myImageID') 
img[0].src = 'http://new.url.for.image/'; 
alert(img[0].complete);     // seems to always return true 
              // in Firefox, perhaps because 
              // the original src had been loaded 

Anstatt also ich dies ...

img = $('myImageID') 
newImg = $('<img>')    // create a completely new IMG element 
      .attr('src', 'http://new.url.for.image/') 
      .attr('id', img[0].id); 
img.replaceWith(newImg); 
img = newImg; 
alert(img[0].complete); 

(Hinweis zu tun hatte: ich genau dieses Code nicht getestet haben, es ist eine vereinfachte Version von dem, was ich habe versucht zu tun, aber hoffentlich kommuniziert die Idee.)

Simon.

Answer 5

Jquery macht es wirklich einfach.

Sie können einfach die Funktion .load() verwenden, um ein Ereignis für die Zeit zu binden, wenn das Bild vollständig geladen ist.

$("img").load(function() { 
     // Yeay, it was loaded, and works in all browsers! 
    }); 

Answer 6

myimage=new Image(); 
myimage.src="whatever"; 
if(myimage.height>0 && myimage.complete){alert("my image has loaded");} 

// might be overly simple but works for me in all browsers i think. 

Answer 7

In meinem Fall verwende ich die Methode

document.images['XXX'].addEventListener('load', dealJob(), false); 

und in Funktion dealJob, ich document.images verwenden [ 'XXX']. Rundet das Bild zu überprüfen, aber es ist immer gibt wahr zurück.

Wenn ich die Methode

document.images['XXX'].onload = function() {dealJob();} 

und in Funktion dealJob zu verwenden, zu ändern, um das Ergebnis von document.images [ 'XXX']. Abgeschlossen ist richtig.

Vielleicht kann es Ihnen helfen.