Lazy Loading de imágenes con JavaScript puro

Echo es una biblioteca escrita con JavaScript para realizar la carga de imágenes bajo demanda utilizando para ello la etiqueta data de HTML5.

La principal ventaja de esta biblioteca con respecto a otras alternativas similares es la total independencia que posee, no requiere de ninguna otra librería ni framework.

Echo funciona con la mayoría de los navegadores modernos, inclusive puede operar sin ningún tipo de inconvenientes en navegadores Internet Explorer desde su versión 8.

lazy loading sin jquery

El atributo data que utiliza este buen recurso es data-echo, mediante su utilización podemos indicarle a la biblioteca que imagen cargar según sea necesario.

Otro aspecto destacado es su peso, apenas 1KB en su versión simplificada, peso que puede reducirse mediante el uso de la compresión gzip.

Ejemplo de uso:

<body>

  <img src="img/blank.gif" alt="Photo" data-echo="img/photo.jpg">

  <script src="dist/echo.js"></script>
  <script>
  Echo.init({
    offset: 100,
    throttle: 250
  });

  // Echo.render(); is also available for non-scroll callbacks
  </script>
</body>

Como se puede apreciar el ejemplo emplear esta biblioteca es de lo más sencillo.

¿Desventajas? solo encuentro una y es que para emplear este proyecto debemos cambiar los src de nuestra imágenes, esto puede dar problemas en aquellos sitios que necesiten indexar en los buscadores las imágenes. También va a dar problemas con las personas que tengan JavaScript deshabitado, por suerte esto se ve cada día menos, por no decir, casi nunca.

Echo cuenta con varias funciones adicionales interesantes para obtener mayor control sobre la carga bajo demanda de las imágenes, esto lo pueden ver en su apartado de Github.

Categorizado en: