IntersectionObserver和ajax加载的内容

Question

目前，我正在网站上工作，该网站使用IntersectionObserver进行了一些本机延迟加载，我尝试加载的图像是通过ajax加载的，因此我认为它们不是“加载”到的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'));
  })
};