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

Voici 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 :

• Lazy Load