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.
