jQuery Infinite Scrolling/Lazy Loading

Question

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/