Événement jQuery pour les images chargées

Question

Est-il possible de détecter quand toutes les images sont chargées via un événement jQuery ?

Idéalement, il devrait y avoir un

$(document).idle(function()
{
}

ou

$(document).contentLoaded(function()
{
}

Mais je ne peux pas trouver une telle chose.

J'ai pensé à joindre un événement comme celui-ci :

$(document).ready(function()
{
    var imageTotal = $('img').length;
    var imageCount = 0;        
    $('img').load(function(){if(++imageCount == imageTotal) doStuff();});
}

Mais cela va-t-il se briser si une image ne se charge pas ? Il est essentiel que la méthode soit appelée, et au bon moment.

Answer 1

Selon les règles de jQuery documentation Si l'on utilise l'événement load avec des images, il existe un certain nombre de réserves. Comme indiqué dans une autre réponse, le plugin ahpi.imgload.js est cassé, mais le gist Paul Irish lié n'est plus maintenu.

Selon Paul Irish, le plugin canonique pour la détection des événements de chargement complet d'images est maintenant à :

https://github.com/desandro/imagesloaded

Answer 2

Si vous voulez vérifier non pas toutes les images, mais une image spécifique (par exemple, une image que vous avez remplacée dynamiquement après que le DOM est déjà complet), vous pouvez utiliser ceci :

$('#myImage').attr('src', 'image.jpg').load(function() {  
  alert('Image Loaded');  
});

Answer 3

Vous pouvez utiliser mon plugin waitForImages pour gérer ça...

$(document).waitForImages(function() {
   // Loaded.
});

L'avantage de cette méthode est que vous pouvez la localiser à un élément ancêtre et qu'elle peut éventuellement détecter les images référencées dans le CSS.

Mais ce n'est que la partie émergée de l'iceberg. documentation pour plus de fonctionnalités.

Answer 4

L'utilisation de la fonction jQuery $().load() comme gestionnaire d'événement IMG n'est pas garantie. Si l'image se charge à partir du cache, certains navigateurs peuvent ne pas déclencher l'événement. Dans le cas des (anciennes ?) versions de Safari, si vous modifiez la propriété SRC d'un élément IMG à la même valeur l'événement onload ne se déclenchera pas.

Il semble que cela soit reconnu dans la dernière version de jQuery (1.4.x) - http://api.jquery.com/load-event - à citer :

Il est possible que l'événement load ne soit pas déclenché si l'image est chargée à partir du cache du navigateur. Pour tenir compte de cette possibilité, nous pouvons utiliser un événement load spécial qui se déclenche immédiatement si l'image est prête. event.special.load est actuellement disponible sous forme de plugin.

Il existe maintenant un plug-in qui reconnaît ce cas et la propriété "complete" d'IE pour les états de chargement des éléments IMG : http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js

Answer 5

Conformément à cette réponse vous pouvez utiliser l'option Événement de chargement jQuery en el window au lieu de l'objet document :

jQuery(window).load(function() {
    console.log("page finished loading now.");
});

Cette opération sera déclenchée après le chargement de tout le contenu de la page. Ceci diffère de jQuery(document).load(...) qui est déclenché après que le DOM ait fini de se charger.