Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to lazy load images inside div scroll element

How can I lazy load images inside #panel-scroll that has overflow: scroll; I tried this code sample but it gave me unexpected token error. Can anyone assist me with this?

document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in getElementById('#panel-scroll') {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.srcset = lazyImage.dataset.srcset;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // Possibly fall back to event handlers here
  }
});
Tags:

2

Answers


  1. 0

    I’d consider the following updates:

    1. When using getElementById, you should use it without the ‘#’ symbol, as it is incorrect. It should be:
    const scrollablePanel = document.getElementById('panel-scroll');
    1. You can specify the root for the IntersectionObserver as an option:
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
  ...
}, { root: scrollablePanel });
    Login or Signup to reply.
  2. 0 
    document.addEventListener("DOMContentLoaded", function() {
  const scrollContainer = document.querySelector('#panel-scroll');
  const lazyImages = [...scrollContainer.querySelectorAll("img.lazy")];

  if ("IntersectionObserver" in window) {
    let observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          let img = entry.target;
          img.src = img.dataset.src;
          img.srcset = img.dataset.srcset;
          img.classList.remove("lazy");
          observer.unobserve(img);
        }
      });
    }, { root: scrollContainer });

    lazyImages.forEach(img => observer.observe(img));
  } else {
    // Fallback: Load all images if IntersectionObserver is not supported
    lazyImages.forEach(img => {
      img.src = img.dataset.src;
      img.srcset = img.dataset.srcset;
    });
  }
});
    1. Initializes an IntersectionObserver with the #panel-scroll as the root.
    2. Observes each image with the "lazy" class within the scroll container.
    3. Loads images as they become visible within the scroll container.
    4. Provides a fallback for browsers that do not support IntersectionObserver.

    This script will efficiently load images only when they are near the viewport of your scrollable #panel-scroll div, enhancing performance and user experience.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search