Déclencher l’événement LOAD sur les images

Déclencher l'événement load sur les images
Déclencher l’événement load sur les images

L’événement load de jQuery ne se déclenche pas forcément sur les images. Si une image est déjà présente dans le cache du navigateur, ou si celle-ci est complètement chargée avant le fichier jQuery, l’événement ne sera pas déclenché puisque le navigateur considère que l’image est déjà chargée.

Afin de remédier à cela, et pour utiliser l’événement afin d’afficher l’image seulement si elle est chargée, en évitant à l’utilisateur de voir le défilement progressif du chargement, on utilise l’attribut javascript complete. Cet attribut s’applique donc sur l’objet javascript.

Si $( this ) est l’objet jQuery, this ou $( this )[0] est l’objet javascript. On peut écrire le code suivant :

On peut ainsi montrer un petit loader gif en CSS en attendant que l'(les) image(s) soi(en)t totalement chargée(s).

Et hop, l’événement load est déclenché à tous les coups sur les images.

Un excellent plugin qui effectue automatiquement ce travail est imagesLoaded.

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *