Lazy load images when they come into the viewport

Question

I've been coming across blogs/websites lately that only load images when they are scrolled into the visible viewport. It then fades them in. Is there a jQuery ... even Wordpress plug-in that does this?

e.g. http://icodeblog.com

Answer 1

One of the good things about JavaScript is you can view source and look at whats going on. After viewing the source I found this:

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

Answer 2

LazyReady: http://plugins.jquery.com/project/LazyReady

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