web-dev-qa-db-fra.com

jQuery ou JavaScript: déterminer quand le chargement de l'image est terminé

Comment détecter le chargement d'une image à partir du serveur ou de la mémoire cache du navigateur? Je souhaite charger différentes images dans la même balise <img/> et détecter la fin du chargement d'une nouvelle image.

Je vous remercie.

javascriptjqueryimageloadcomplete
20
Francisc
$('img').on('load', function() {
    // do whatever you want
});
38
Matthew

L'événement du document onload ne sera déclenché qu'après le chargement complet de tous les éléments, y compris les images.

L'événement onload <img> se déclenchera une fois l'image complète chargée.

Vous pouvez donc attacher un écouteur à ces événements, en utilisant des objets jQuery ou addEventListener de DOM (et attachEvent d'IE)

5
Pikrass

Je pense que cela semble un peu plus propre

$('img').load(function() {
    // Your img has finished loading!
});
4
Henrik

Eh bien, c’est un sujet assez ancien que j’ai rencontré hier. J'utilise les fichiers backbone.js et require.js et le redimensionnement de ma mise en page posait toujours des problèmes avec les vues contenant des images.

Il me fallait donc un moyen de savoir quand le chargement de la dernière image serait terminé pour redimensionner la mise en page. Toutes les solutions mentionnées ci-dessus ne fonctionnaient pas dans mon cas. Après quelques heures de recherche, j'ai trouvé la solution ultime qui fonctionne:

http://desandro.github.com/imagesloaded/

J'espère que cela aide les autres aussi.

4
bardu

D'une question très similaire Manière officielle de demander à jQuery d'attendre le chargement de toutes les images avant d'exécuter quelque chose et tout comme Pikrass dit:

Avec jQuery, vous utilisez $(document).ready() pour exécuter quelque chose lorsque leDOMest chargé et $(window).load() pour exécuter quelque chose lorsque tous les autres éléments sont également chargés, tels que les images.

Voici deux exemples:

DOM

jQuery(document).ready(function(){
    console.log('DOM ready');
});

Images/Autres

jQuery(window).load(function(){
    console.log('all other things ready');
});

Vous devriez pouvoir confirmer sur votre console:

screenshot-with-shadow.png http://img547.imageshack.us/img547/9681/yih.png

2
cwd

Pour une détection plus approfondie du chargement des images, y compris des images chargées à partir du cache, essayez ceci: https://github.com/paulirish/jquery.imgloaded

2
bejonbee

Tout le monde a mentionné que l'événement devrait être déclenché avant d'être réglé sur la src.

Mais si vous ne voulez pas vous en soucier, vous pouvez utiliser l'événement oncomplete (sera déclenché même avec les images en cache) pour déclencher onload, comme ceci:

$("img").one("load", function() {
  // do stuff
}).each(function() {
  if(this.complete) $(this).load();
});

Avec jQuery, vous n'avez pas à vous soucier de la compatibilité ascendante (par exemple: img.height>0 dans IE)

0
Tom Sarduy