Retrasar la Carga de la Imágenes con Lazy Load

by admin Date: 25-04-2013


Lazy Load, ispirado a YUI ImageLoader de Matt Mlinac es un interesante plugin para jQuery que permite postergar la carga de imágenes en páginas web largas. Las imágenes que están fuera de la zona visible no serán cargadas hasta que el usuario haga scroll y desplace la página sobre estas imágenes.

Para hacer uso de esta librería es necesario incluir el el header de nuestro HTML jQuery y jquery.lazyload.js el cual lo puedes descargar desde el web oficial Lazy Load Plugin for jQuery.

Paso 1: JQuery

Cargamos el jQuery en el header.

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

Paso 2: Lazyload.js

Cargamos el lazyload.js en el header.

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

Paso 3: Inicializar LazyLoad

El siguiente paso es inicializar el llamado a Lazy Load, esto lo hacemos llamando ala función lazyload a todas las imágenes de nuestro html.

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

Eso es suficiente para postergar la carga de imágenes en nuestras páginas hasta que estas imágenes estén en la zona visible del browser. Adicionalmente se tienen algunas opciones para mejorar el funcionamiento de esta técnica, por ejemplo podemos mostrar una imagen de fondo mientras se carga la imagen e incluso podemos asignar un mínimo de pixels antes de mostrar las imágenes.

$(function() {
    $("img").lazyload({placeholder : "img/loading.gif", threshold : 100});
});

 

En el ejemplo se muestra la imagen loading.gif y se mostrarán las imágenes si es visible mas de 100 pixels de la imagen. Pueden ver el ejemplo funcionando en Lazy Load Demo.

 
by admin Date: 25-04-2013 visitas : 2501  
 
 
 
 


Utilizamos cookies propias y de terceros para mejorar nuestros servicios, mostrarle publicidad relacionada con sus preferencias, realizar análisis estadísticos sobre los hábitos de navegación de nuestros usuarios y facilitar la interacción con redes sociales. Si continúa navegando, consideraremos que acepta su uso. Puede cambiar la configuración u obtener más información aquí Política de cookies.