Javascript: Lazy Load Images In Horizontal Div?

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.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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

Method 2

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?

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0