Faster Page Loads With Lazy Load

Faster page loads with lazy load
by Janeth Kent 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 Janeth Kent Date: 25-04-2013 hits : 1463  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN END DEVELOPMENT.

 
 
 

We use our own and third-party cookies to improve our services, compile statistical information and analyze your browsing habits. This allows us to personalize the content we offer and to show you advertisements related to your preferences. By clicking "Accept all" you agree to the storage of cookies on your device to improve website navigation, analyse traffic and assist our marketing activities. You can also select "System Cookies Only" to accept only the cookies required for the website to function, or you can select the cookies you wish to activate by clicking on "settings".

Accept All Only sistem cookies Configuration