¿Qué es el Lazy Loading?
El Lazy Loading o carga diferida de imágenes es una gran manera de optimizar nuestros sitios web. Esta práctica básicamente implica dividir el código en puntos de interrupción lógicos y luego cargarlo una vez que el usuario haya hecho algo que requiera o requiera un nuevo bloque de código. Esto acelera la carga inicial de la aplicación y aligera su peso general, ya que es posible que algunos bloques ni siquiera se carguen.
La forma más sencilla que se me ocurre explicarlo sería la siguiente, al entrar a nuestro sitio en lugar de hacer peticiones a todos los recursos (en este caso imágenes) por medio de un script le indicamos que realice la carga únicamente de los recursos que están a la vista del usuario.
En la siguiente imagen podemos ver que dentro del área visible es donde se cargan las imágenes mientras que las imágenes que no son visibles no se cargaron.
En el mismo script indicamos que al momento de hacer scroll se carguen las siguientes imágenes.
Cómo implementarlo en mi sitio
Es muy sencillo, para esto voy a recomendar una librería ligera y fácil de usar: https://appelsiini.net/projects/lazyload/
Paso 1.
Antes de que termine la etiqueta <body> escribe la petición del script.
<script src="mi-proyecto/vendors/lazyload@2.0.0-beta.2/lazyload.js"></script>También podemos hacer la petición usando una CDN:
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-beta.2/lazyload.js"></script>Paso 2.
Las imágenes deberán de seguir cualquiera de estos patrones:
<img class="lazyload" width="765" height="574" data-src="img/example.jpg"><img class="lazyload" src="img/example-thumb.jpg" width="765" height="574" data-src="img/example.jpg">
Paso 3.
Por último tenemos que inicializar el plugin utilizando el siguiente método.
lazyload();Si lo prefieres, también puedes pasar explícitamente los elementos de la imagen. Aplica esto por ejemplo en caso de querer un nombre de clase diferente.
let images = document.querySelectorAll(".mi-clase");lazyload(images);
Aquí un ejemplo de cómo funciona.
See the Pen YjeoQm by CSS Tianguis (@css-tianguis) on CodePen.
Amazon Auto Links: No products found.