Javascript: Lazy Charger des images en horizontal Div?

Question

J'ai un div qui a un tas de vignettes montrant horizontalement (avec une barre de défilement horizontale). Existe-t-il un moyen de charger ces vignettes paresseux et de les afficher uniquement lorsque l'utilisateur fait défiler horizontalement sa position? Tous les exemples que j'ai vus vérifient la fenêtre du navigateur, pas un div. Ceci est pour les entrées du concours, donc il y a parfois des centaines d'entrées, ce qui affecte considérablement les performances.

Merci d'avance.

Answer 1

Je fourchue le lazy load plugin pour jQuery et a ajouté le support pour les images de chargement paresseux dans un conteneur div. Le lazy load plugin pour jQuery prend désormais cela en charge directement. Il ne devrait pas être trop difficile de supprimer la dépendance à jQuery ou de l'adapter à une autre bibliothèque si vous en avez besoin.

Vous pouvez obtenir mon projet forked de github: http://github.com/silentmatt/jquery_lazyload/tree/master. Pour l'utiliser, appelez lazyload sur les images comme dans l'original, sauf que vous devez ajouter une option "container" avec l'élément div scrolling. Donc, si votre HTML ressemble à ceci:

<div id="container" style="width: 765px; overflow: scroll;"> 
    <img src="image1.jpg" width="765" height="574"> 
    <img src="image2.jpg" width="765" height="574"> 
    <img src="image3.jpg" width="765" height="574"> 
    ... 
</div> 

vous appelleriez lazyload comme ceci:

$("#container img").lazyload({ container: $("#container") }); 

Answer 2

Voir ma question où j'ai rencontré un problème similaire. Jason Bunting m'a donné un petit script pratique pour charger des images en morceaux .:

How to display loading status with preloader and multiple images?