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 vi

Answer 1

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 2

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

Answer 3

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

http://jscroll.com/

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

Answer 4

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/