Quali soluzioni alternative esistono per la proprietà `complete` in FireFox?

Question

Sto tentando di utilizzare jQuery per determinare se un'immagine è stata caricata correttamente.

I seguenti funziona bene (e restituisce true o false come dello stato dell'immagine), ma sembra funzionare solo in IE, in FireFox, sembra di tornare sempre true - anche se lo stato è in realtà incompleta:

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

Qual è l'equivalente di Firefox per image.complete in JavaScript o jQuery?

Answer 1

Non so se Firefox ha un altro puntello, metodo che lo fa, ma, è possibile utilizzare questa soluzione:

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

Si potrebbe anche provare a controllare l'una delle dimensioni dell'elemento img oltre a complete:

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

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

    return true; 
} 

Un scaricato img o un img con un attributo valido src dovrebbe avere .height() e .width() uguale 0 in Firefox. In Chrome e Opera nessuno dei due metodi sembra funzionare correttamente. Nei miei browser, theImage.height() ha sempre restituito un valore positivo nei miei test.

Answer 3

È possibile utilizzare load() ma attenzione di Internet Explorer: Non scatterà l'evento, se l'immagine viene memorizzata nella cache

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

Sì, stavo solo lavorando su una pagina AJAX che ha caricato in modo dinamico le immagini . Volevo anche rilevare se le immagini sono state caricate in modo da poterle passare con un effetto jQuery.

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 

Così, invece ho dovuto fare questo ...

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

(Nota: io non ho ancora testato questo codice esatto, si tratta di una versione semplificata di quello che stavo cercando di fare, ma si spera che comunichi l'idea.)

Simon.

Answer 5

Jquery rende davvero semplice.

È possibile utilizzare semplicemente la funzione .load() per associare un evento al momento in cui l'immagine è completamente caricata.

$("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

Nel mio caso, io uso il metodo

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

e nella funzione dealJob, io uso document.images [ 'XXX']. Complete per controllare l'immagine, ma sempre ritorna vero

Quando cambio di utilizzare il metodo

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

ed in funzione dealJob, il risultato di document.images [ 'XXX']. Completo è corretto.

Forse può aiutarti.