ImagePreloader - Un plugin JQuery pour précharger vos images

JQuery Image Preloader est un plugin JQuery pour précharger des images en fond dans le but d'accélérer le chargement de vos pages.

Vous le savez certainement, la nouvelle mode dans le Web consiste à optimiser le temps de chargement de vos pages à l'aide de Sprites CSS par exemple, en minifiant vos codes JS et CSS, en réduisant le plus possible le nombres de requêtes vers des médias (Images, vidéos, scripts...) ou encore via des logiciels pour compresser au maximum vos images.

Les moteurs de recherche tiennent désomais en compte la métrique d temps de chargement des pages web dans  leurs algorithmes.

Le concept:

Lorsque tous les chargements d'une page ont été effectués, il ne se passe plus grand chose, et vous pourriez charger des images présentes sur d'autres pages du site en attendant. Les navigateurs les mettent en cache, ainsi lorsque vous vous rendez sur une autre page, ces images pré-chargées s'affichent directement.

On y gagne, une fois de plus, en temps de chargement.

Et c'est ce que permet le script de pré-chargement d'images, il vous permet de charger en fond des images qui figurent sur d'autres pages de votre site.

Utilisation:

Tout d'abord, récupérez le code contenu dans le gros snippet qui est en fait le plugin, et mettez-le dans un fichier.

Comme tout plugin JQuery, vous devez inclure la librairie JQuery et ce dernier sur votre page.

Ensuite, à vous d'utiliser la méthode voulue:

- Pré-chargez les images souhaitées à l'aide de la méthode $.preLoadImages:

$.preLoadImages(
     [
          'http://www.google.co.uk/intl/en_uk/images/logo.gif',
          'http://l.yimg.com/eur.yimg.com/i/uk/hp/yahoo1.png',
          'http://tk2.stc.s-msn.com/br/hp/11/en-us/css/i/msn_b2.gif'
     ],function(){
          alert('Toutes les images passées ont été chargées');
     }
);

- Pré-chargez toutes les images trouvées en lien dans le CSS avec la méthode $.preLoadCSSImages:

$.preLoadCSSImages(function(){
     alert('Toutes les images en lien dans les CSS ont été chargées');
});

- Ou le mix des 2 grâce à la méthode $.preLoadAllImages:

$.preLoadAllImages(
     [
          'http://www.google.co.uk/intl/en_uk/images/logo.gif',
          'http://l.yimg.com/eur.yimg.com/i/uk/hp/yahoo1.png',
          'http://tk2.stc.s-msn.com/br/hp/11/en-us/css/i/msn_b2.gif'
     ],function(){
          alert('Toutes les images passées et celles en lien dans le CSS ont été chargées');
     }
);

Notez que pour toutes les méthodes, il y a une fonction de callback appelée lorsque tout a été chargé, à vous d'en faire ce que vous voulez (laissez vide par défaut).

Autre remarque, il est judicieux d'exécuter le pré-load au bout de 5 secondes par exemple, tout simplement pour éviter de ralentir l'affichage de la page actuelle avec les images à pré-charger.

Site Officiel