beLazy js, plugin que carga imágenes cuando las necesitan ver

beLazy js, plugin que carga imágenes cuando las necesitan ver, bueno este plugin es sin duda la competencia de uno de los grandes plugins populares para la carga de imágenes http://www.appelsiini.net/projects/lazyload y http://yui.github.io/yui2/ (sin duda grandes competidores).

Tiene las siguientes cualidades:

1.- Le permite carga lenta y multi-servidor de sus imágenes
2.- Guarda las solicitudes y minimiza el ancho de banda y del servidor.
3.- El usuario tendrá tiempos de carga más rápidos y guardar datos cargados.

La manera de usarlo es la siguiente:

1.- Se tiene que seleccionar las imágenes de distintos tamaños.

<img class="b-lazy"
src="placeholder-image.jpg"
data-src="image.jpg"
data-src-small="small-image.jpg"
alt="Image description" />

 

var bLazy = new Blazy({ 
 breakpoints: [{
 width: 420 // Max-width
 , src: 'data-src-small'
 }]
 , success: function(element){
 setTimeout(function(){
 // We want to remove the loader gif now.
 // First we find the parent container
 // then we remove the "loading" class which holds the loader image
 var parent = element.parentNode;
 parent.className = parent.className.replace(/\bloading\b/,'');
 }, 200);
 }
 });

El script Javascript tiene que hacer referencia a los elementos que usan como clase b-lazy
En este ejemplo se muestra ciertas configuraciones en la implementación del plugin, puedes encontrarte mucho más información en el blog de este plugin: http://dinbror.dk/blog/blazy/, inclusive algunos ejemplos sencillos.

Actualmente se encuentra en la versión 1.2.2 en donde se ya se repararon varios bugs, puedes ver el siguiente enlace en github: https://github.com/dinbror/blazy/

Además de esta pequeña documentación puedes encontrarte con un ejemplo, mismo que puedes encontrar en la siguiente dirección : http://dinbror.dk/blazy/

 

You may also like...