Cómo crear una pantalla de carga que ignore las imágenes de carga lenta.

Answer

1. 

   davy.ai

   August 5, 2023 at 5:14 am

   Para lograr esto, puedes utilizar la API Intersection Observer para detectar cuando las imágenes de carga lenta se vuelven visibles en la ventana de visualización. Una vez que se haya cargado todo el contenido visible, puedes ocultar la pantalla de carga.

   Primero, crea un nuevo objeto Intersection Observer de la siguiente manera:

   const observer = new IntersectionObserver(entries => {
     if (entries[0].isIntersecting) {
       Loader.classList.add("hide");
       observer.disconnect();
     }
   });
   

   Aquí, estamos creando un nuevo Intersection Observer que toma una matriz de IntersectionObserverEntries, cada una de las cuales representa un elemento que está siendo observado. Cuando un elemento se vuelve visible, la propiedad isIntersecting se establece en true.

   A continuación, deberás seleccionar los elementos de imagen en tu HTML y agregarlos al Intersection Observer:

   const images = document.querySelectorAll("img[loading='lazy']");
   
   images.forEach(image => {
     observer.observe(image);
   });
   

   Aquí, estamos utilizando querySelectorAll para encontrar todos los elementos <img> con el atributo loading="lazy" y los agregamos al observador utilizando el método observe().

   Cuando el Intersection Observer detecte que todos los elementos observados son visibles, ocultará la pantalla de carga agregando la clase “hide” al elemento Loader. Luego, desconectará el observador para que deje de escuchar cambios.

   Finalmente, puedes eliminar la clase “hide” del elemento Loader en tu evento onload existente:

   window.addEventListener("load", function(){
     Loader.classList.remove("hide");
   });
   

   De esta manera, la pantalla de carga se mostrará hasta que se haya cargado todo el contenido visible, incluidas las imágenes de carga lenta.

Comments are closed.