Détecter la charge de l'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 l'attacher avant de définir la source, sinon l'événement peut avoir été déclenché avant l'attachement d'un gestionnaire pour l'écouter (par exemple, le chargement à partir du cache).

Si ce n'est pas faisable (régler le src après la liaison), assurez-vous de vérifier s'il est chargé et lancez-le vous-même, comme ceci:

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

Answer 2

C’est aussi simple que d’utiliser du Javascript simple:

   // 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

Je fais aussi de la recherche sur cela depuis longtemps, et j'ai trouvé ce plugin qui aide merveilleusement avec ceci: https://github.com/desandro/imagesloaded

Cela me semble un tas de code, mais ... Je n'ai trouvé aucun autre moyen de vérifier quand une image a été chargée.