Magazine Internet

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

Publié le 04 octobre 2009 par Alexandre_julien

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


Vous pourriez être intéressé par :

Retour à La Une de Logo Paperblog

Ces articles peuvent vous intéresser :

A propos de l’auteur


Alexandre_julien 60 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte

Magazine