Javascript: Lazy Load Immagini in div orizzontale?

Question

Ho un div che ha un mucchio di miniature che mostrano in orizzontale (con una barra di scorrimento orizzontale). Esiste un modo per caricare lentamente queste anteprime e mostrarle solo quando l'utente scorre in senso orizzontale fino alla loro posizione? Tutti gli esempi che ho visto controllano la finestra del browser, non un div.

Questo è per le voci del concorso, quindi a volte ci sono centinaia di voci, che influiscono drasticamente sulle prestazioni.

Grazie in anticipo.

Answer 1

Ho modificato il plug-in di caricamento pigro per jQuery e ho aggiunto il supporto per lazy- caricamento di immagini in un contenitore div. Il plug-in di caricamento lento per jQuery ora supporta questo direttamente. Non dovrebbe essere troppo difficile rimuovere la dipendenza da jQuery o adattarla a un'altra libreria, se necessario.

Puoi ottenere il mio progetto biforcuto da github: http://github.com / silentmatt / jquery_lazyload / albero / master .

Per usarlo, chiama lazyload sulle immagini proprio come nell'originale, tranne per il fatto che devi aggiungere un " container " opzione con l'elemento div scorrevole. Quindi se il tuo HTML appare così:

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

chiameresti lazyload in questo modo:

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

Answer 2

Vedi la mia domanda in cui ho riscontrato un problema simile. Jason Bunting mi ha dato un piccolo script utile per caricare immagini in blocchi:

Come visualizzare lo stato di caricamento con precaricatore e multipli immagini?