Différer le chargement des images en Ajax avec jQuery Lazy Load

Lazy Load est un plugin jQuery qui optimise le chargement des pages où il y a beaucoup d’image lourdes. Son principe : charger les images au fur et à mesure que l’utilisateur descend la « scrollbar ». Du coup le travail du navigateur est optimisé et cela permet d’afficher des images de très grande tailles sur une seule page.

Son fonctionnement est extrêmement simple, il suffit d’afficher vos images avec des balises HTML « <img> » pis le plugin se charge de tout le reste.

// Ce petit bout de code est suffisant pour mettre en place Lazy Load
$("img").lazyload();

// On peut choisir une image de remplacement en attendant le chargement
$("img").lazyload({ placeholder : "img/grey.gif" });

// Utilisation d'effets de transitions pour les images
$("img").lazyload({
<pre>    placeholder : "img/grey.gif",
    effect : "fadeIn"
});

// Il existe plein d'autres options pour personnaliser ce plugin

Vous trouver une demo ici : http://www.appelsiini.net/projects/lazyload/enabled_fadein.html
Le site officiel du plugin avec la documentation : http://www.appelsiini.net/projects/lazyload