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
| Imprimer l'article | Cette entrée a été posté par admin le 4 octobre 2009 à 9 h 54 min, et placée dans jQuery. Vous pouvez suivre les réponses à cette entrée via RSS 2.0. Vous pouvez laisser une réponse, ou bien un trackback depuis votre site. |






about 9 months ago
Super utile comme plugin jQuery! Je crois que tu m’as convaincu de suivre ton flux RSS
about 7 months ago
C’est exactement ce que je cherche depuis quelque temps mais impossible de trouver les bons mots clefs pour tomber sur ce plugin.
Je vais enfin pouvoir faire un beau slideshow en haute def de photos!
about 3 months ago
Salut, je cherhce la meme chose mais pour charger des swf, une idée ?
about 3 months ago
Je n’en connais pas pour les SWF mais vous pouvez toujours essayer de modifier ce plugin pour qu’il s’adapte aux SWF
about 3 months ago
Je m’y connait pas du tout en javascript, c’est possible de modifier le script pour qu’il puisse fonctionner au chargement (image par image).
about 1 week ago
Est-il possible qu’il entre en conflit avec prototype ?
about 1 week ago
Complètement jquery prototype mootools et dojo rentrent tous en conflits ils sont dérives de prototype en revanche tu peux mettre le mode compatibilité avec jquery il suffit de remplacer le $ par jquery et mettre le mode compatibilité en place