BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

Lazy load, carga tus imágenes bajo demanda con jQuery

02/OCT/2012 13.696 visitas Ver comentarios
Lazy load, carga tus imágenes bajo demanda con jQuery

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

Lazy Load es un plugin de jQuery escrito en JavaScript que se encarga de retrasar la carga de imágenes en las páginas web largas. Las imágenes que se encuentren fuera del viewport (parte visible de la página web) no serán cargadas antes de que llegues a su ubicación bien sea con la rueda del ratón o la barra de scroll. Resumiendo, hace justamente lo contrario que la precarga de imágenes.

Usar Lazy Load en páginas web largas que contienen muchas imágenes de gran tamaño hará que la carga de la página vaya más rápido. Incluso, va más allá, ya que el navegador estará en el estado listo después de cargar únicamente las imágenes visible de un primer vistazo omitiendo aquellas que no se vean hasta que te desplaces por la web. En algunos casos, también puede ayudar a reducir la carga del servidor.

Lazy Load se inspira en YUI ImageLoader por Matt Mlinac y tiene múltiples opciones como efecto fadein, noscript fallback -si no tienes javascript activado funcionará igual-, desplazamiento horizontal, desplazamiento horizontal dentro del contenedor, desplazamiento vertical en el interior de contenedores, tiempo de espera, etc...

Lazy Load depende de jQuery por lo que no debes olvidar de incluirla y luego debes especificar una imagen de base -grey.gif- que se repetirá en todas las imágenes mientras no se cargue la foto original. Esta imagen de base, puede tener 1x1 px con lo que será realmente rápida. Además, deberás indicar el jpq que quieras cargar utilizando el atributo data-original tal como se muestra en el código más abajo.

Por último, si no quieres aplicarlo a todas las imágenes, siempre podrás especificar una clase a tus imágenes para que sólo lo aplique a las imágenes especificadas.

No se hable más, lo quiero!
Pues eso, descárgalo de aquí y si quieres ver demos, pues entra aquí.

Código 1 - HTML
<script type="text/javascript" src="jquery.js" </script>
<script type="text/javascript" src="jquery.lazyload.js" </script>
Código 2 - JAVASCRIPT
$ ("Img.lazy") lazyload ().;
Código 3 - HTML
<img width="640" class="lazy" src="img/grey.gif" data-original="img/example.jpg" heigh="480" />

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 21 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018