Hay algunas formas “tradicionales” diferentes de carga diferida de imágenes. Todos requieren que JavaScript necesite averiguar si una imagen es actualmente visible dentro de la ventana del navegador o no. Los enfoques tradicionales pueden ser:
- Escuchar
scrollyresizeeventos en elwindow - Usando un temporizador como
setInterval
Ambos tienen problemas de rendimiento.
Si está buscando agregar carga diferida a los medios de su sitio en este momento, Lozad.js no es una mala opción, pero el soporte nativo comenzará pronto, por lo que debe considerarse en sus planes de marcado.
- Una carga diferida nativa para la web
- La guía completa para la carga diferida de imágenes
- Consejos para rodar su propia carga diferida
¿Por qué los enfoques tradicionales no son eficaces?
Ambos enfoques enumerados anteriormente son problemáticos porque funcionan repetidamente y su función activa ** diseño forzado al calcular la posición del elemento con respecto a la ventana gráfica, para verificar si el elemento está dentro de la ventana gráfica o no.
Para combatir estos problemas de rendimiento, algunas bibliotecas aceleran las llamadas a funciones que hacen estas cosas, limitando el número de veces que se realizan.
Incluso entonces, las operaciones repetidas de activación de diseño / reflujo consumen un tiempo precioso mientras un usuario interactúa con el sitio e induce “basura” (esa sensación de lentitud al interactuar con un sitio que a nadie le gusta).
Hay otro enfoque que podríamos usar, que hace uso de una nueva API de navegador diseñada específicamente para ayudarnos con cosas como la carga diferida: la API de Intersection Observer.
Eso es exactamente lo que usa mi propia biblioteca, Lozad.js.
¿Qué hace que Lozad.js sea eficaz?
Los observadores de intersecciones son el ingrediente principal. Permiten el registro de funciones de devolución de llamada que se llaman cuando un elemento monitoreado entra o sale de otro elemento (o de la propia ventana gráfica).
Si bien los observadores de intersección no proporcionan los píxeles exactos que se superponen, permiten escuchar eventos que nos permiten ver si los elementos ingresan a otros elementos en un X% (configurable), luego se activa la devolución de llamada. Ese es exactamente nuestro caso de uso cuando usamos Intersection Observers para carga diferida.
Datos breves sobre Lozad.js
- Ligero: solo 535 octetos minificado y comprimido con gzip
- Sin dependencias
- Utiliza la API IntersectionObserver
- También permite la carga diferida de elementos agregados dinámicamente (no solo imágenes), a través de una función de carga personalizada
Uso
Instalar desde npm:
yarn add lozado vía CDN:
<script src="https://cdn.jsdelivr.net/npm/lozad"></script>En su HTML, agregue una clase a cualquier imagen que desee cargar de forma diferida. La clase se puede cambiar a través de la configuración, pero “lozad” es el valor predeterminado.
<img class="lozad" data-src="https://css-tricks.com/lozad-js-performant-lazy-loading-images/image.png">También tenga en cuenta que hemos eliminado el src atributo de la imagen y lo reemplazó con data-src. Esto evita que la imagen se cargue antes de que JavaScript se ejecute y determine que debe ser así. Depende de usted considerar las implicaciones allí. Con este HTML, las imágenes no se mostrarán en absoluto hasta que se ejecute JavaScript. Tampoco se mostrarán en contextos como RSS u otra sindicación. Es posible que desee filtrar su HTML para usar solo este patrón de marcado cuando se muestre en su propio sitio web y no en otro lugar.
En JavaScript, inicialice la biblioteca Lozad con las opciones:
const observer = lozad(); // lazy loads elements with default selector as ".lozad"
observer.observe();Lea aquí sobre la lista completa de opciones disponibles en la API de Lozad.js.
Manifestación
Vea el Pen oGgxJr de Apoorv Saxena (@ApoorvSaxena) en CodePen.
Soporte del navegador
La compatibilidad con el navegador es limitada, ya que la función es relativamente nueva. Utilice el polyfill oficial de IntersectionObserver para superar el soporte limitado de esta API.