/ javascript

Lazy Load

¿En que me ayudara usar lazy load en mi sitio?

En principio aplicar esta técnica ayuda a mejorar el performance de tu sitio haciendo que tus imágenes carguen una vez que todos los demás archivos JS y CSS se encuentren en el navegador, lo ideal es que generes una funciona que hará un recorrido por el documento buscando todas las imágenes que cuenten con una clase previamente definidas para hacer que carguen ya sea de manera general en toda tu página, en un componente específico o dependiendo el ViewPort que se tenga en ese momento.

¿Cómo es que esto pasa?

Lo primero es definir una clase para todas tus imágenes que se requieran se carguen de manera lazy load para añadirlo los atributos, romperemos la estructura común del tag IMG

<img src=”...your_path.jpg” class=”some-class”/>

Haciendo que quede de la siguiente manera

<img tu_atributo_a_buscar=”...your_path.jpg” class=”tu-clase-lazy-load/>

¿Qué conseguimos con lo anterior?. Bien este sencillo pero crucial cambio hace que cuando el navegador esté cargando y por su funcionamiento habitual, al encontrar un tag IMG este busque su atributo SRC y haga una petición para la url la cual tiene referenciada pero, como nosotros modificamos el tag no estamos llenando con información el atributo si no que estamos creando uno custom y así el request nunca será lanzado ayudando como se mencionó antes a que el sitio cargue de manera mas rapida.

Una vez que se tenga bien definido el atributo custom lo que necesitamos es crear un archivo JS que nos ayuda a hacer un cambio y ponga el valor de nuestro atributo custom al SRC de la imagen, con ayuda de JQUERY nos dará la facilidad cachar eventos que nos permiten lanzar acciones en determinada situación, para este caso nos interesa “ready” el que cual estaremos colocando como una función al final de nuestro archivo js.

$(document).ready(function () {
    //miFuncionParaIniciar()
})

Entendiendo como se debe inicializar la función procederemos a realizar el contenido de la función:

  1. Necesitaremos encontrar todos los elementos IMG que contenga nuestra clase lazy load definida y a si como el atributo custom.
  2. Se requiere comprobar que el arreglo obtenido tenga a menos 1 elemento.
  3. Una vez que tengamos acceso a estos elementos necesitamos recorrer el arreglo y sacar la url de nuestro atributo custom y crear el atributo src con la url obtenida.
  4. Opcional: Puedes borrar el atributo custom una vez se extraiga la información

Con los datos anteriores podremos realizar nuestro archivo con la funcionalidad requerida el siguiente ejemplo nos sirve para todos los documentos existentes dentro del DOM tomando en cuanto a aquellos que se encuentren como “hidden” porque si tu requerimiento es mas especifico necesitas hacer un filtro mas especifico.


function lazyload() {
   // se hace una búsqueda por todos los elementos que cuenten con la clase lazy
   var images =  [].slice.call(document.querySelectorAll("tu_clase_a_lazy"));
   // se hace un recorrido en el arreglo  dependiendo de cuantos elementos se hallan
   //encontrado
   for (var i= 0; i < images.length; i++) {
    // Pregunta si las imágenes se encuentran dentro del ViewPort
     if(elementInViewPort(images[i])){
	//se hace una comparación si el atributo a buscar tiene información 
           if (images[i].getAttribute("tu_atributo_a_buscar")){
              // De tener información se extrae y se añade al atributo SRC
               images[i].setAttribute("src", images[i].getAttribute("tu_atributo_a_buscar"));
	  // Se elimina el Atributo custom a buscar
               images[i].removeAttribute("tu_atributo_a_buscar");
           }
      }
   }

  // Si no se obtiene  se vuelve a generar los eventos para que estén a la escucha de algún
  // cambio
   if (images.length == 0) {
         window.removeEventListener("DOMContentLoaded", lazyload);
         window.removeEventListener("load", lazyload);
         window.removeEventListener("resize", lazyload);
         window.removeEventListener("scroll", lazyload);
   }
}

// Esta función nos ayudará a ver en qué parte del ViewPort nos encontramos
function elementInViewPort(element) {
    var rect = element.getBoundingClientRect();
    return (rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (document.documentElement.clientHeight) &&
            rect.right <= (document.documentElement.clientWidth))
}

// Evento que manda a llamar a la función lazyload() una vez que se hayan cargado los JS y CSS
$( document ).ready(function() {
    lazyload();
});

// agregan los Listeners para los eventos
window.addEventListener("DOMContentLoaded", lazyload);
window.addEventListener("load", lazyload);
window.addEventListener("resize", lazyload);
window.addEventListener("scroll", lazyload);