Faster Page Loads With Lazy Load

by admin admin Date: 25-04-2013


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.

 
by admin admin Date: 25-04-2013 hits : 1052