IntersectionObserver и ajax загруженный контент - PullRequest
Новая
       23

IntersectionObserver и ajax загруженный контент

0 голосов
/ 19 февраля 2020

В данный момент я работаю над веб-сайтом, на котором есть некоторая ленивая загрузка изображений с использованием 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 * * 1005

1 Ответ

1 голос
/ 19 февраля 2020

Да, это возможно. После того, как вы получите свои данные и обновите 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'));
  })
};
...