Retrasar la carga de imágenes

Otra forma de ahorrarnos peticiones en grandes listados de imágenes es no cargarlas hasta que se vayan a mostrar, es decir, conforme vayamos haciendo scroll iremos cargando las fotos en vez de cargarlas todas desde un primer momento. Esta forma de reducir peticiones se llama LazyLoad.


Por ejemplo una página en la que posponer la carga es ChieStore.com, ya que tiene un listado de calzado con más de 130 fotos. Al cargar la página cargaremos las primeras filas del listado, lo que son 4 u 8 fotos según nuestra resolución de pantalla, y conforme vayamos bajando por la página se irán cargando el resto de imágenes cómo podemos observar en la imagen inferior, que van cargando las imágenes en grupos de 4.

Para utilizar este método necesitaremos utilizar las librerías jQuery y jQuery Sonar, que la utilizaremos para saber cuando están los elementos cerca de la pantalla. El código en concreto lo utilizaremos de la siguiente forma:

• L"as imágenes en las que queramos utilizar LazyLoad tendremos que escribirlas de la siguiente forma
  
  <img width="300px" src="images/1x1.trans.gif" data-lazy-src="imagenes\Tulips.jpg">
  En el campo "src" pondremos una imagen de 1x1 que será la que se cargará en vez de el resto de imágenes, y en el campo "data-lazy-src" pondremos la ruta de la imagen.
• En el pie de la página insertaremos en siguiente script:
  
  $(document).ready(function() {
      (function($) {
          lazy_load_init();
          $('body').bind('post-load', lazy_load_init);
          function lazy_load_init() {
              $('img[data-lazy-src]').bind('scrollin', {distance: 200} ,function() {
                  lazy_load_image( this );
              });
          }
          function lazy_load_image( img ) {
              var $img = jQuery( img ),
              src = $img.attr( 'data-lazy-src' );
     
              $img.unbind('scrollin') // remove event binding
              .hide()
              .removeAttr('data-lazy-src')
              .attr('data-lazy-loaded','true');
              img.src = src;
              $img.fadeIn();
          }
      })(jQuery);
  });
  
  Lo que hace es asignarle un evento a las imágenes que tengan el atributo "data-lazy-src" para que lancen la funcion "lazy_load_image" cuando estén a 200 píxeles de la pantalla. Esta función lo que hace es sustituir el parámetro "src" de la imagen por "data-lazy-src", quitar el evento para que no vuelva a intentar cargar la imagen y mostrarla.