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/

Answer 2

try this jQuery Lazy Scroll Loading Plugin http://code.google.com/p/jquerylazyscrollloading/

Answer 3

You can try this jQuery plugin I wrote that uses html comments to lazy load any arbitrary bits of html, including images:

jQuery Lazy Loader Blog Post

jQuery Lazy Loader Plugin Page

Here's an example:

<pre class=”i-am-lazy” ><!–
    <img src=”some.png” />
 –></pre>

<pre class=”i-am-lazy” ><!–
    <div>Any, html css img background, whatever. <img src=”some.png” /> </div>
–></pre>

<script type=”text/javascript” src=”jquery.lazyloader.js” ></script>
<script type=”text/javascript” >
$(document).ready( function()
{
    $(’pre.i-am-lazy’).lazyLoad();
});
</script>

So basically you wrap the content you want to lazy load with a placeholder tag and and inner html comment. When the placeholder becomes visible in the viewport, it is replaced with the html string inside the comment.

You can use any tag for the placeholder but I like pre because it renders as 0 dimension when there's only a comment inside.

Hope this helps! @MW_Collins

Answer 4

Here's two more JQuery plugins that do lazy loading / infinite scroll:

http://jscroll.com/

http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/