Image LazyLoad plugin for jQuery

By Digbyswift at August 05, 2010 04:19

The Lazy Load plugin has to be one of the best jQuery plugins I’ve seen yet. For image heavy sites, it will certainly take the edge off loading times.

Its really easy to implement too. You obviously need a reference to the jQuery library and a reference to the LazyLoad library:

<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="jquery.lazyload.mini.js"></script>    

You then need the following javascript code to call the LazyLoad routine:

$(document).ready(function() {
    $(function() {
        $("img").lazyload({
            placeholder : "../images/grey.gif", 
            threshold : 50,
            effect: "fadeIn"
        });
    });
});

The example above will fade any images in within 50px of the page fold.

Nice.

Comments are closed