Intersection Observer обнаруживает неправильное количество пересекающихся изображений после вызова ajax - PullRequest
Новая
       18

Intersection Observer обнаруживает неправильное количество пересекающихся изображений после вызова ajax

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

РЕДАКТИРОВАТЬ: я работал над своими функциями и соответственно обновил их в этом посте

Я хочу реализовать отложенную загрузку изображений на веб-сайт. Эти изображения находятся в разных галереях, которые загружаются асинхронно, в зависимости от того, какую галерею хочет видеть пользователь.

Моя проблема в том, что иногда IntersectionObserver сообщает, что все изображения пересекаются.

Это моя lazy load функция: 

function lazyLoad(lazyImgs) {
  console.log('lazyLoad fired', lazyImgs);

  const imgOptions = {
    threshold: 0,
    rootMargin: '0px 0px 0px 0px'
  };

  const imgObserver = new IntersectionObserver((entries, imgObserver) => {
    entries.forEach(entry => {
      if (entry.intersectionRatio > 0) {
        let lazyImage = entry.target;
        let sources = lazyImage.children;

        for (let s = 0; s < sources.length; s++) {
          let source = sources[s];

          console.log('intersecting: ', source);

          imgObserver.unobserve(lazyImage);
        }
      } // end is intersecting
    });
  }, imgOptions);

  lazyImgs.forEach(img => {
    imgObserver.observe(img);
  });
} // end lazyLoad();

lazyLoad(); вызывается при конец этой функции, когда содержимое загружено: 

function getContent(url) {
  url = url.split('#');
  link = url[1] + '.php';

  // load content into the content-wrapper
  let str = $('.content-wrapper').load('inc.galleries/' + link, function(
    responseTxt,
    statusTxt,
    xhr
  ) {
    if (statusTxt == 'error') {
      console.log('Error: ' + xhr.status + ': ' + xhr.statusText);
    }
  });

  // Convert the HTML string into a document object
  let $contentWrapper = $('.content-wrapper');
  html = $.parseHTML(str);
  nodeName = [];

  // Append the parsed HTML
  $contentWrapper.append(html);

  // when Ajax request is complete...
  // ...get all images with a class of lazyImgs and run lazyLoad function :)
  $(document).ajaxStop(function() {
    let lazyImgs = document.querySelectorAll('.lazyImg');
    lazyLoad(lazyImgs);
  });
}

let lazyImgs возвращает мне список узлов со всеми элементами изображения с классом lazyImg, поэтому DOM, похоже, имеет был успешно обновлен. Но IntersectionObserver все еще не может определить, какие изображения находятся внутри области просмотра.

РЕДАКТИРОВАТЬ 2: Я подозреваю, что IntersectionObserver обнаруживает, что изображения пересекаются при загрузке и, следовательно, еще не имеют полного размера. У кого-нибудь есть идеи, как я мог go об этом?

1 Ответ

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

Я выяснил, в чем проблема, и нашел, я думаю, разумное решение. Может быть, это поможет кому-то еще:

CSS для изображений, которые я использовал, имеет fixed height. Но width был установлен на auto и, очевидно, из-за этого изображения загружались width: 0;. Вот почему IntersectionObserver сообщил о том, что все они пересекаются (поскольку они были на самом деле все на экране, хотя бы на короткое время).

Затем я установил min-width на изображениях. Это не идеально. Но только с одним Media Query в 900px изображения масштабируются очень хорошо, и IntersectionObserver распознает правильное количество изображений в окне просмотра. 

.gallery-img img {
  margin: 0 0.14rem;
  min-width: 25rem;
  width: auto;
  height: 68vh;
}

@media screen and (max-width: 900px) {
  .gallery-img img {
    min-width: 20rem;
  }
}

Как я уже сказал, это не идеально. Но это делает работу. Если у кого-то есть лучшее решение, я был бы рад увидеть его!

...