Ajax调用后，Intersection Observer检测到错误数量的相交图像

Question

编辑：我致力于我的功能，并相应地在本文中对其进行了更新

我想实现将图片的延迟加载到网站。这些图像位于不同的画廊中，这些画廊将异步加载，具体取决于用户希望看到的画廊。

我的问题是，有时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在加载图像时检测到图像相交，因此还没有完整尺寸。有谁知道我该怎么做？

Answer 1

我发现了问题所在，并提出了-我认为-合理的解决方案。也许这对其他人有帮助：

我正在使用的图像的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;
  }
}

正如我所说，这并不理想。但这确实起作用。如果有人有更好的解决方案，我将不胜感激！