Carga de imágenes a demanda con jQuery

Hola, en esta oportunidad quiero compartir con todos la posibilidad de mejorar la experiencia de los usuarios de nuestros sitios web con la carga a demanda de imágenes con jQuery.

Cuando la página tiene muchas imágenes y tarda mucho en cargar, una solución eficaz es sólo cargar las imágenes que están en la parte visible del explorador. Para esto utilizaremos jQuery.

En este ejemplo vamos a colocar varias imágenes a cargar en nuestra web, luego le agregaremos nuestras etiquetas que nos permitirán cargar cuando nos las pida el usuario.

Atributos dentro de la etiqueta IMG:

• src: En esta etiqueta se debe colocar una imagen fija. Se recomienda una imagen de no mayor a 1kb. Una imagen en blanco puede ser.
  
• title: El título de nuestra imagen, esta es muy importante para el SEO.
  
• alt: Descripción de nuestra imagen, esta es muy importante para el SEO.
  
• data-real-type: Esta etiqueta nos dirá qué tipo de archivo queremos utilizar para ser precargado. También se puede utilizar este código para hacer una carga por demanda de un IFrame, pero en este caso decimos que es de image.
  
• data-real-src: Esta etiqueta nos permitirá saber cuál es la ruta del archivo de la imagen real que queremos cargar cuando nuestro usuario que está navegando nos la pida.
  
• width: El ancho de nuestra imagen. Lo colocaremos en auto.
  
• height: El Alto de nuestra imagen. Lo colocaremos auto.
  

Implementación en el HTML:

Código :

<img title="Titulo del Seo" alt="Descripcion para el SEO" src="http://cdn5.iconfinder.com/data/icons/woocons1/Pictures.png" data-real-type="image" data-real-src="http://www.benjalink.com/wp-content/uploads/2011/11/facebook-at-work.jpg"  width="auto" height="auto" />

<img title="Titulo del Seo" alt="Descripcion para el SEO" src="http://www.noticiasyfarandula.com/wp-content/plugins/bj-lazy-load/img/placeholder.gif" data-real-type="image" data-real-src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-ash4/p206x206/603412_10151199396982848_1649411737_n.jpg"  width="auto" height="auto" />

<img title="Titulo del Seo" alt="Descripcion para el SEO" src="http://cdn5.iconfinder.com/data/icons/woocons1/Pictures.png" data-real-type="image" data-real-src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-ash4/p206x206/603412_10151199396982848_1649411737_n.jpg"  width="auto" height="auto" />

<img title="Titulo del Seo" alt="Descripcion para el SEO" src="http://cdn5.iconfinder.com/data/icons/woocons1/Pictures.png" data-real-type="image" data-real-src="http://www.google.com/about/datacenters/gallery/images/_2000/IDI_017.jpg"  width="auto" height="auto" />

Añadir el jQuery

Recuerden colocar antes del final de la etiqueta </body> la librería jQuery:

Código :

<script src=" https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Funciones

• check_image_load: Verifica si la imagen está visible y si esto es correcto realiza la carga en nuestra web.
  
• is_in_view: Verifica solamente si la imagen es visible en el explorador.
  

Código :

function check_image_load() {  
    $('[data-image]').each(function(e) { 
        if (is_in_view($(this))){
        $(this).append('<img src="'+$(this).attr('data-image')+'" width="'+$(this).attr('data-imagew')+'" height="'+$(this).attr('data-imageh')+'" />').removeAttr('data-image').hide().fadeIn(2000);
        }  

    });  

    $('[data-real-src]').each(function(e) { 
        if (is_in_view($(this))){
       if($(this).attr('data-real-type')=="image"){
           $(this).attr('src',$(this).attr('data-real-src')).removeAttr('data-real-src').hide().fadeIn(2000);
       }
      }  

    });  
}  

function is_in_view(elem) {  
    var docViewTop = $(window).scrollTop();  
    var docViewBottom = docViewTop + $(window).height();  
    var elemTop = $(elem).offset().top;  
    var elemBottom = elemTop + $(elem).height();  
    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)); 
}  

// Llamado de la función check_image_load cuando se mueva el scroll y cuando cargue la página normalmente
$(window).scroll(function() { check_image_load(); });
$(document).ready(function() { check_image_load(); });

Ver Demo

Espero que les funcione para sus trabajos actuales.

Feliz ía.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.