Détecter la charge d'image

Question

Est-il possible de détecter une fois qu'une image a été chargée avec jQuery?

Answer 1

Vous pouvez utiliser le gestionnaire d'événements .load(), comme ceci:

$("#myImg").load(function() { 
    alert('I loaded!'); 
}).attr('src', 'myImage.jpg'); 

Assurez-vous de le fixer avant le réglage de la source ou l'événement peut-être tiré avant que vous avez joint un gestionnaire pour écouter ce (par exemple, chargement à partir du cache).

Si c'est pas faisable (réglage de la src après la liaison), assurez-vous de vérifier si elle est chargée et le feu vous-même, comme ceci:

$("#myImg").load(function() { 
    alert('I loaded!'); 
}).each(function() { 
    if(this.complete) $(this).load(); 
}); 

Answer 2

Il est tout aussi simple à utiliser simplement Javascript:

// Create new image 
var img = new Image(); 

    // Create var for image source 
var imageSrc = "http://example.com/blah.jpg"; 

    // define what happens once the image is loaded. 
img.onload = function() { 
    // Stuff to do after image load (jQuery and all that) 
    // Within here you can make use of src=imageSrc, 
    // knowing that it's been loaded. 
}; 

    // Attach the source last. 
    // The onload function will now trigger once it's loaded. 
img.src = imageSrc; 

Answer 3

J'ai aussi des recherches sur ce depuis longtemps, et nous avons trouvé ce plugin pour merveilleusement aide avec ceci: https://github.com/desandro/imagesloaded

Cela semble être un gros lot de code, mais ... je n'ai trouvé aucun autre moyen de vérifier quand une image a été chargée.

Answer 4

L'utilisation de jQuery on ('load') est la bonne façon de vérifier si l'image est chargée. Mais sachez que la fonction on ('load') ne fonctionnera pas si l'image est déjà dans le cache.

var myImage = $('#image_id'); 
//check if the image is already on cache 
if(myImage.prop('complete')){ 
    //codes here 
}else{ 
    /* Call the codes/function after the image is loaded */ 
    myImage.on('load',function(){ 
      //codes here 
    }); 
} 

Answer 5

Je pense que cela peut vous aider un peu:

$('img').error(function(){ 
     $(this).attr(src : 'no_img.png'); 
}) 

Ainsi, si chargé - sera affiché image originale. Dans l'autre - sera montré image, qui contient des faits avec l'image écrasée ou 404 HTTP Header.

Answer 6

Il est facile avec jquery:

$('img').load(function(){ 
    //do something 
}); 

Si essayé avec:

$('tag')html().promise().done(function(){ 
    //do something 
}) ; 

mais ne vérifie pas si l'image est la charge. Ce feu fait si le code est chargé. Sinon, vous pouvez vérifier si le code a été fait puis déclencher la fonction de chargement img et vérifier si l'image est vraiment chargée. Nous faisons donc une combinaison des deux:

$('tag')html('<img src="'+pic+'" />').promise().done(function(){ 
    $('img').load(function(){ 
    //do something like show fadein etc... 
    }); 
}) ;