IntersectionObserver 和 ajax 加载的内容

Question

我目前正在网站上工作，它有一些使用 IntersectionObserver 的图像本机延迟加载，我尝试加载的图像是通过 ajax 加载的，结果我没有不认为它们在页面加载时 "loaded" 变为 DOM，因此无法延迟加载图像，延迟加载代码如下所示，

const io = new IntersectionObserver((entries, observer) => {
    // console.log(entries)
    entries.forEach(entry => {
      console.log('');

      if (entry.isIntersecting) {

        console.log('intersecting');

        const img = entry.target;
        const src = img.getAttribute('data-lazy');

        img.setAttribute('src', src);
        img.classList.add('fade');

        observer.disconnect();
      }
    });

是否可以延迟加载作为通过 ajax 加载的内容的一部分的图像？

Answer 1

是的，这是可能的。获取数据并更新 DOM 后，您需要再次调用观察者。

const io = new IntersectionObserver((entries, observer) => {
  // console.log(entries)
  entries.forEach(entry => {
    console.log('');

    if (entry.isIntersecting) {

      console.log('intersecting');

      const img = entry.target;
      const src = img.getAttribute('data-lazy');

      img.setAttribute('src', src);
      img.classList.add('fade');

      observer.disconnect();
    }
  });
});

io.observe(document.querySelectorAll('ímg'));

const fethNewData = () => {
  // any ajax call
  window.fetch().then((html) => {
    //update DOM
    document.querySelector('body').innerHTML = html;
    //call observe again
    io.observe(document.querySelectorAll('ímg'));
  })
};

IntersectionObserver 和 ajax 加载的内容

IntersectionObserver and ajax loaded content

javascript

lazy-loading

intersection-observer