image-observer.js

const images = [...document.querySelectorAll('img')];

const onIntersection = (entries, observer) => {
  entries.forEach(async (entry) => {
    if (entry.isIntersecting) {
      try {
        // We use loadImage method from previous example
        await loadImage(entry.target.src);
      } catch (error) {
        console.error(error);
      } finally {
        // When image has been loaded
        // stop observing the image
        observer.unobserve(entry.target);
      }
    }
  });
};

const observer = new IntersectionObserver(onIntersection);

// Start observing every image
images.forEach((image) => observer.observe(image));