Plugin jQuery : Lazy Load, différer le chargement de vos images

plugin-jquery-lazy-loadVoici un plugin jQuery qui va vous « soulager » votre bande passante !

Son idée : différer le chargement des images qui ne sont pas présente dans la partie « visible » de la fenêtre du navigateur.

Vous me suivez là ? non ? je reformule alors : les images où il faut scroller pour les voir ne sont pas charger au démarrage mais uniquement quand elles apparaissent dans votre champ visuel.

C’est plus clair ?

Si c’est pas le cas allez voir la démo parce que là…

Pour l’intégrer, c’est simple :

  • le framework jQuery,
  • le plugin
  • et on lance la fonction qui va bien :

[javascript]
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazyload.js"></script>
<script type="text/javascript">
$(function() {
$("img").lazyload({ placeholder : "images/grey.gif" });
});
</script>
[/javascript]

Dans cette exemple, les images sont remplacées par une image « grey.gif » (une image d’un pixel sur un) puis l’image original sera chargée lorsqu’il le faudra :)

D’autres paramètres sont possibles (comme différer le chargement de l’image, réagir au clic, …)

Note importante du site officiel :

It seems jQuery 1.3.x breaks the plugin for IE. All images get loaded in the background even when they should not. I am working on it. In the meanwhile stay with jQuery 1.2.6.

Son seul défaut…

Lien :

Article written by devzonefr

Développeur d'applications de formation, je me suis aujourd'hui spécialisé dans le développement web.

Une réponse à “Plugin jQuery : Lazy Load, différer le chargement de vos images”

  1. Plugin jQuery : QueryLoader, précharger vos pages web | DevZone - Zone de développement web

    [...] vous ai parlé de Lazy Load un plugin jQuery permettant de différer le chargement de vos [...]

Laisser un commentaire