Quelles sont les solutions de contournement pour la propriété `complete` dans FireFox?

Question

J'essaie d'utiliser jQuery pour déterminer si une image a été correctement chargée.

Les travaux suivants très bien (et retourne true ou false comme de l'état de l'image), mais semble ne fonctionner que dans IE, FireFox, il semble toujours revenir true - même si l'Etat est en fait incomplète:

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

Quel est l'équivalent Firefox pour image.complete en JavaScript ou jQuery?

Answer 1

Je ne sais pas si Firefox a un autre accessoire, la méthode qu'il fait, mais vous pouvez utiliser cette solution de contournement:

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

Vous pouvez également essayer de vérifier l'une des dimensions de l'élément img en plus complete:

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

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

    return true; 
} 

Un déchargé img ou un attribut img avec un src invalide devrait avoir .height() et .width() égale à 0 dans Firefox. Dans Chrome et Opera, aucune méthode ne semble fonctionner correctement. Dans ces navigateurs theImage.height() toujours retourné une valeur positive dans mes tests.

Answer 3

Vous pouvez utiliser la charge(), mais méfiez-vous d'Internet Explorer: Il ne se déclenche pas l'événement, si l'image est mise en mémoire 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

Oui, je viens de travailler sur une page AJAX que les images chargées dynamiquement . Je voulais également détecter si les images étaient chargées afin que je puisse les transposer avec un effet 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 

Ainsi, au lieu que je devais faire ...

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

(Note: Je ne l'ai pas testé ce code exact, il est une version simplifiée de ce que je voulais faire, mais communique l'idée avec succès.)

Simon.

Answer 5

Jquery le rend vraiment simple.

Vous pouvez simplement utiliser la fonction .load() pour lier un événement au moment où l'image est complètement chargée.

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

Dans mon cas, j'utilise la méthode

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

et en fonction dealJob, j'utilise document.images [ 'XXX']. Complète pour vérifier l'image, mais toujours renvoie vrai.

Quand je change d'utiliser la méthode

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

et en fonction dealJob, le résultat de document.images [ 'XXX']. Complète est correcte.

Peut-être que cela peut vous aider.