pedidos-express/public/main/js/utils/observer.js

const observerOptions = {
  root: null, // Observa en relación al viewport
  threshold: 0,
  rootMargin: "0px 0px 150px 0px" 
};

/**
 * Callback que se ejecuta cuando un elemento observado entra
 * o sale del área de observación.
 */
const lazyLoadCallback = (entries, observer) => {
  entries.forEach(entry => {
    // Comprueba si el elemento está ahora visible (o a punto de estarlo)
    if (entry.isIntersecting) {
      const element = entry.target;
      const imageElement = document.createElement('img');
      const imageUrl = element.dataset.src;

      if (imageUrl) {
        imageElement.onload = () => {
            // Asigna la imagen de fondo. Aquí es donde el navegador la descarga.
            element.style.backgroundImage = `url('${imageUrl}')`;
        }
        imageElement.onerror = () => {
            element.style.backgroundImage = `url('/express/assets/no_image.png')`;
        };
        // (Opcional) Añade una clase para animar la aparición
        element.classList.add('bg-loaded');

        imageElement.src = imageUrl;
        observer.unobserve(element);
    }
    }

            
  });
};

// Crea la instancia del observer
export const imageObserver = new IntersectionObserver(lazyLoadCallback, observerOptions);