La renovada interfaz de Google Images muestra los resultados y a media que vamos bajando la página, nuevas imágenes son cargadas.
Pero ¿Cómo hacer para cargar las imágenes de una página al estilo de Google Image con Mootools?
La verdad es muy sencillo y fue publicado por el blog de David Walsh, éste utiliza el plugin Moootools LazyLoad.
Implementación
Primero enlazamos la biblioteca Mootools:
<script type="text/javascript" src="mootools-1.2.4.js"></script>
El siguiente es el código que necesitamos para implementar la funcionalidad:
//nueva instancia
var lazyload = new LazyLoad({
//onLoad event/option
onLoad: function(img) {
//set opacity to 0, fade it in!
img.setStyle('opacity',0).fade(1);
}
});
Todo el efecto se logra sin modificaciones al plugin. Igualmente no funciona en navegadores basados en Webkit. También con IE presenta algunos problemas que son abordados en el post original (en inglés).
Fade Images with MooTools LazyLoad
Sitio: davidwalsh.name/lazyload-fade