Lazyload es un método para hacer que el contenido de una pagina sea cargado asincronamente, esto significa que el contenido de la pagina como texto y datos que no sean multimedia serán cargados de una manera rápida ya que el navegador no se detendrá a descargar imágenes, vídeos u objetos que tengan que ser cargados de manera asíncrona.
La carga diferida es una técnica que aplaza la carga de recursos no esenciales en el tiempo de carga de la página. Estos recursos no esenciales se cargan en el momento en que son necesarios. En lo que se refiere a las imágenes, “no esencial” generalmente es sinónimo de “fuera de pantalla”.
developers.google.com
En la actualidad es muy sencillo encontrar librerías de javascript para hacer esta función de lazyload sin tener que hacerlo nosotros, es tan fácil como buscar en google lazyload js libraries y les aparecerán muchos resultados, al igual que buscar lazyload en github.
Utilidad de lazyload
La principal utilidad de este método es que los sitios carguen mas rápido y los usuarios no se aburran de esperar, ya que si tarda demasiado en abrir un sitio los usuarios se aburren y se van a otro lado. Es una buena forma también de aprovechar para no gastar los mb en caso de que estén en el celular ya que si cargan toda la pagina con imágenes, vídeos y demás, el sitio pesara demasiado lo que es malo si tus usuarios están usando datos limitados.
Ahora, veamos algunas de las librerías lazyload que a mi parecer son bastante buenas. sin embargo pueden dejar en los comentarios alguna otra que ustedes conozcan y quieran compartir.
Sin mas empezamos.
nota: no están numeradas por que no las considero mejor o peor.
Librerías recomendadas
- verlok/lazyload
Esta librería esta basada en vanilla js o js puro por lo que no depende de otra librería como JQuery.
La implementación es muy sencilla por que su documentación en github o en su pagina https://www.andreaverlicchi.eu/lazyload/ esta detallada para hacer pruebas muy fácilmente.
- tuupola/lazyload
Esta librería fue la primera que probé hace ya bastante tiempo incluso llegue a hacer un demo de esta misma (galería). Al momento de escribir esto esta librería esta en su versión 2.0, sin duda deberían probarla, su pagina es https://appelsiini.net/projects/lazyload/
- ApoorvSaxena/lozad.js
Es otra librería que me llama bastante la atención simplemente por que pesa muy poco y no tiene dependencias. pueden ver un demo funcionando en https://apoorv.pro/lozad.js/demo/
Estas son solo algunas de cientos que pueden encontrar en la web, sin embargo no puedo listar todas aquí.
Solo para aclarar que el lazyloading no solo se aplica a imágenes, también se puede aplicar a vídeos, objetos como pdf, canvas. etc.
