Comunidad de diseño web y desarrollo en internet online

Carga progresiva de imágenes con lazyload.js y jQuery

Por fr3d1_m4dr1d el 14 de Julio de 2012 con 23,207 visitas
HTML, CSS y Javascript Otros tutoriales por fr3d1_m4dr1d.

Aprende cómodamente como mejorar la velocidad y la experiencia del usuario en tus diseños web. Este ejemplo implementa la carga de imágenes sólo cuando, mediante el scroll, aparecen en la parte visible del navegador. Solo necesitarás usar jQuery y el plugin lazyload.js.

Recuerda borrar los datos de navegación (cache) para poder visualizar el efecto correctamente.

Ejemplo de página con imágenes (sin) carga bajo demanda.

Ejemplo de página con imágenes (con) carga bajo demanda.

Para descargar los archivos del tutorial

Envia un comentario (9)

efectos jquery plugins

Por Night~ el 17 de Julio de 2012

Un efecto que parece ser algo difícil hecho de manera tan fácil! Muy bien explicado
Por jedidias777 el 17 de Julio de 2012

Gracias por el post es algo que quería hacer hace tiempo
Por fr3d1_m4dr1d el 18 de Julio de 2012

Me alegro que os haya ayudado. Muchas gracias por vuestros comentarios. A ver si busco algo de tiempo y publico más tutoriales con trucos interesantes, así cortitos y digeribles como este.
Por fr3d1_m4dr1d el 20 de Julio de 2012

Los que ya sabéis que es la carga de imágenes bajo demanda, jquery y lazyload, saltad el primer vídeo, pues en la parte2 se explica suficientemente. Se pueden descargar los archivos y echarles un vistazo. Veréis que fácil resulta.

Saludos
Por Joel.vx el 21 de Julio de 2012

Excelente! Gracias por el aporte
Por ebuzz el 23 de Julio de 2012

woo muy bien explicado, yo sabia que eso era un efecto jquerry pero en mi escuela nadie sabe jaja
Por werozen el 01 de Agosto de 2012

hola fr3d1_m4dr1d , gracias por el plugin! lo estoy implementando en un proyecto personal y tengo un problema que no se como solucionar, verás, no logro que me cargue las primeras imágenes visibles hasta que no hago un pequeño scrool, he revisado la documentación oficial en http://www.appelsiini.net/projects/lazyload y al parecer el Event to Trigger Loading por defecto es el scroll pero si lo cambio luego no funciona, me puedes ayudar?
Por elgolem el 09 de Agosto de 2012

Existe algún equivalente para Mootools?
Por Problemas de permiso el 16 de Agosto de 2014

Los link's de los ejemplos hacen peticiones pero les hace falta permisos.

Carga progresiva de imágenes con lazyload.js y jQuery

Publica tu comentario

o puedes...