jQuery Infinite Scrolling/Lazy Loading

Question

Hi,

I'm currently redesigning my website and have been looking into using JavaScript and jQuery. Here is what I have so far: http://www.tedwinder.co.uk/gallery2/.

My vision is to have all of the photos on one page, which the user can scroll through, like now. However, I understand the limitations and effects of having 50+ large-ish images on one page and have considered using infinite scrolling and lazy loading, which I understand would only load the images when the user gets to them, or when they click on a "More" link?

So, my question is: would this reduce the page load, how exactly would I go about implementing infinite scrolling/lazy loading and would this work effectively, or could you think of any more effective way of doing this?

Thanks, Ted

Answer 1

This is a pretty good plugin for jQuery that handles image lazy loading.

http://www.appelsiini.net/projects/lazyload

Images below the fold wont be loaded until they are scrolled into view.

It will cut down on the bandwidth of your site, but if you dont have a lot of traffic it wont make much of a difference.

For an example of this technique in use, check out http://mashable.com/

Answer 2

For infinite scrolling, there is also the jQuery Tools Scrollable plugin, if it's any help.

Answer 3

I wrote a simple tutorial on using the jquery lazyload plugin - check it out: http://deanhume.com/Home/BlogPost/lazy-loading-images-with-jquery/22