Curso Javascript - LAZY LOADING de Imagenes NATIVO - HTML5 [Intersection Observer]
¡Hola!, en la clase de hoy estaremos viendo la API de Intersection Observer, con ella vamos a poder realizar un código para la carga diferida de las imágenes, es decir, hacer Lazy Loading de imágenes.
Para ello vamos a crear una instancia del Intersection Observer y lo vamos a configurar, esto es crear la función callback, que recibe las entradas (entries) y el observer, y las opciones, que básicamente son el root (donde definimos el viewport), el rootMargin (margen para ese viewport) y el threshold (los umbrales).
Agregaremos nuestros tags img y los contenedores de imágenes de fondo al observer mediante el método observe
Finalmente escribiremos la función callback donde recorreremos todas las entradas (entries) y de ellas analizaremos su propiedad isIntersecting, en caso de que sea true, tendremos que cargar las imágenes apropiadas.
Para optimizar nuestro sitio, luego que las imágenes fueron cargadas, dejaremos de observar estos elementos, mediante el método unobserve.
Cualquier duda o pregunta podes dejármela en los comentarios y lo mas importante: ¡sigue aprendiendo, sigue practicando!