Lazy Load: Retrasar carga de imágenes

Lazy Load es un interesante plugin para jQuery que permite postergar la carga de imágenes en páginas web largas. Las imágenes que están fuera de la zona visible no serán cargadas hasta que el usuario haga scroll y desplace la página sobre estas imágenes.

Un clásico y muy buen ejemplo de esta técnica lo podemos ver en el Apple Store donde podemos ver que a medidas que nos desplazamos por la página se van cargando las imágenes.

lazyload

Como utilizar Lazy Load
Para hacer uso de esta librería es necesario incluir el el header de nuestro HTML jQuery y jquery.lazyload.js el cual lo puedes descargar desde el web oficial Lazy Load Plugin for jQuery.

  1. <script src="jquery.js" type="text/javascript"></script>
  2. <script src="jquery.lazyload.js" type="text/javascript"></script>

El siguiente paso es inicializar el llamado a Lazy Load, esto lo hacemos llamando ala función lazyload a todas las imágenes de nuestro html.

  1. $(function() {
  2.     $("img").lazyload();
  3. });

Eso es suficiente para postergar la carga de imágenes en nuestras páginas hasta que estas imágenes estén en la zona visible del browser. Adicionalmente se tienen algunas opciones para mejorar el funcionamiento de esta técnica, por ejemplo podemos mostrar una imagen de fondo mientras se carga la imagen e incluso podemos asignar un mínimo de pixels antes de mostrar las imágenes.

  1. $(function() {
  2.     $("img").lazyload({placeholder : "img/loading.gif", threshold : 100});
  3. });

En el ejemplo se muestra la imagen loading.gif y se mostrarán las imágenes si es visible mas de 100 pixels de la imagen. Pueden ver el ejemplo funcionando en Lazy Load Demo.

Comentarios Total 3 comentarios


Carluis Pérez
Publicado: 04/10/2009 11:16 am

Exelente muy buen Tema,Unijimpe este es un muy buen metodo para Retrasar carga de imágenes Buen Aporte…

Mat
Publicado: 28/10/2009 8:12 pm

Esto, ayudaría a no hacer tantas peticiones al servidor por ejemplo???:…

Javier
Publicado: 16/11/2009 9:07 pm

Muy bueno, lo utilize y mi web mejoro un 100% en velocidad de carga. Lo que te queria consultar es si sabes o puedes darme una punta de como saber para ver cuando el navegador descarga el ultimo elemento.
Por ejemplo tengo una pagina que muestra una galeria de 30 fotos, y quiero poner un preloader hasta que la ultima foto se descargue.

Desde ya muchas gracias.

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)