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.

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.

• asp
• javascript
• html
• lazy-loading

Share Improve this question Follow asked Jan 14, 2009 at 21:18 Arthur ChaparyanArthur Chaparyan 2,02566 gold badges2929 silver badges3535 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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./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") });

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

How to display loading status with preloader and multiple images?