Faster Page Loads With Lazy Load

Lazy Load, is a plugin that allows you to defer image loading until the image is scrolled to.

Options and Events

Options for LazyLoad include:

• range: (defaults to 200) The amount of space from the container’s bottom position that you want to look for images to load.
• image: (defaults to “blank.gif”) The image to replace the original image.
• resetDimensions: (defaults to true) Removes the image’s width and height attributes.
• elements: (defaults to “img”) Images to consider for lazy loading.
• container: (defaults to window) The container for which to look for images within.
• mode: (defaults to “vertical”) The mode for which the plugin will adjust to.

Events for LazyLoad include:

• Complete: Fires when all images have been loaded.
• Load: Fires on each individual image once it has been loaded.
• Scroll: Fires when the container is scrolled.

How it works

Step 1: JQuery

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
.google.load("jquery", "1.3.2");
</script>
    

Step 2: Lazyload.js

<script src="URL/VERSO/jquery.lazyload.js" type="text/javascript"></script>

Step 3: Initialize LazyLoad

<script type="text/javascript">  	
jQuery(document).ready(function(){  		
$("img").lazyload({  		    
failurelimit : 50,  		    
effect : "fadeIn"  		
});  	
});  
</script>

Look at the Lazy Load Demo.