Javascript: Lazy Load Images In Horizontal Div?

Question

I have a div that has a bunch of thumbnails showing horizontally (with a horizontal scrollbar). Is there a way to lazy load these thumbnails and only show them once the user horizontally scrolls to their position? All the examples I've seen check the browser window, not a div.

This is for contest entries so sometimes there are hundreds of entries, which drastically affects performance.

Thanks in advance.

Answer 1

See my question where I encountered a similar problem. Jason Bunting gave me a handy little script to load images in chunks.:

http://stackoverflow.com/questions/334325/how-to-display-loading-status-with-preloader-and-multiple-images

Answer 2

I forked the lazy load plugin for jQuery and added support for lazy-loading images in a container div. The lazy load plugin for jQuery now supports this directly. It shouldn't be too hard to remove the dependency on jQuery or adapt it to another library if you need to.

You can get my forked project from github: http://github.com/silentmatt/jquery_lazyload/tree/master.

To use it, call lazyload on the images just like in the original, except you need to add a "container" option with the scrolling div element. So if your HTML looks like this:

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

you would call lazyload like this:

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