Desarrollo front-end, estándares web, accesibilidad y más
Por kcmr, el 30 de diciembre de 2009 en Javascript, Utilidades
La técnica “Lazy Load” consiste en detener la carga inicial de imágenes u otros elementos hasta que están en el área visible de la pantalla, momento en que se cargan con un efecto fade in (aparición suave).
Es ideal para páginas con galerías lineales de imágenes, en las que la carga de imágenes a petición (al hacer scroll) puede reducir considerablemente el tiempo inicial de carga de la página.
Existe un plugin para jQuery y también uno para Prototype, pero no acababa de encontrar uno que funcionara exactamente igual para Mootools, aunque existe uno, así que me he decidido a hacerlo basándome en el de Prototype.
Es un script bastante sencillo que no contempla otras opciones como ancho y alto mínimo de las imágenes o extensión (gif, jpg, etc). Su funcionamiento se basa en reemplazar el atributo src de las imágenes que no están en el área visible de la pantalla por el de una imagen de peso muy reducido (43 bytes) y utilizar el atributo src original cuando esta imagen pasa a estar en el área visible de la pantalla. La posición de la imagen se detecta con el evento scroll de la página.
Para saber si la imagen está en el área visible de la pantalla he utilizado el método explicado en otro post para hacer lo mismo con Prototype.
Se inicializa con el evento ‘domready’ del objeto window. En la demo se utilizan todas las imágenes, pero se podría utilizar cualquier selector, sólo las imágenes con una determinada clase, o las imágenes que estén dentro de una capa, etc.
window.addEvent('domready', function(){
$$('img').each(function(el){
new Kcmr.MooLazyLoad(el);
});
});
Como única opción se puede pasar la ruta a la imagen de 1x1px que se utiliza como sustitución de la imagen original. La ruta por defecto es “images/blank.gif”
Ejemplo con otros selectores y ruta personalizada a la imagen de sustitución:
window.addEvent('domready', function(){
$$('.clase img.clase').each(function(el){
new Kcmr.MooLazyLoad(el, {
blank: 'directorio/imagen.gif'
});
});
});
Campos obligatorios marcados con asterisco *