Notez que cet article a été écrit il y a plus de 3 ans, mais il n'est pas forcément obsolète.
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 :
|
1 2 3 4 5 |
$( 'img' ).on( 'load', function() { $( this ).css({ visibility: 'visible', background: 'none' }); }).each( function() { if( this.complete ) $( this ).trigger( 'load' ); }); |
On peut ainsi montrer un petit loader gif en CSS en attendant que l'(les) image(s) soi(en)t totalement chargée(s).
|
1 2 3 4 |
img { visibility: hidden; background: url('loading.gif') no-repeat center; } |
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.
