¿Qué soluciones existen para la propiedad `completa` en FireFox?

Question

Estoy intentando usar jQuery para determinar si una imagen se ha cargado correctamente.

Los siguientes trabajos muy bien (y devuelve true o false a partir del estado de la imagen), pero sólo parece funcionar en IE, en Firefox, parece siempre volver true - incluso si el estado es en realidad incompleta:

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

¿Cuál es el equivalente de Firefox para image.complete en JavaScript o jQuery?

Answer 1

No sé si Firefox tiene otro apoyo, método que hace pero, puede utilizar esta solución:

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

También puede probar el control de la una de las dimensiones del elemento img además de complete:

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

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

    return true; 
} 

Un descargada img o un img con un atributo no válido src debe tener .height() y .width() igual a 0 en Firefox. En Chrome y Opera, ninguno de los dos métodos funciona correctamente. En esos buscadores theImage.height() siempre devolví un valor positivo en mis pruebas.

Answer 3

Puede utilizar la carga() pero cuidado con Internet Explorer: No va a desencadenar el evento, si la imagen se almacena en caché

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í, yo estaba trabajando en una página de AJAX que dinámicamente cargado imágenes . También quería detectar si las imágenes se cargaron para poder hacer la transición con un efecto 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 

Así que en lugar que tenía que hacer esto ...

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: No he probado este código exacto, que es una versión simplificada de lo que estaba tratando de hacer, pero con suerte, comunica la idea.)

Simon.

Answer 5

Jquery lo hace realmente simple.

Puede simplemente usar la función .load() para enlazar un evento con el tiempo cuando la imagen está completamente cargada.

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

En mi caso, utilizo el método

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

y en función de dealJob, utilizo document.images [ 'XXX']. Completas para comprobar la imagen, pero siempre devuelve verdadero.

Cuando cambio para usar el método

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

y en dealJob función, el resultado de document.images [ 'XXX']. Completa es correcto.

Quizás te pueda ayudar.