Question

IntersectionObserver是一个相当新的实验性API，目前所有浏览器都是not fully supported。

它会有很多用途，但是现在最突出的一个是懒人加载你的图像，也就是说你的网站上有很多它们。如果您使用recommended by Google审核您的网站，则为Lighthouse。

现在，网上有几个片段暗示其用法，但我认为它们都没有100％经过审核。例如，我正在尝试使用this one。它就像Chrome，Firefox和Opera上的魅力一样，但它不适用于IE和Edge。

const images = document.querySelectorAll('img[data-src]');
const config = {
  rootMargin: '50px 0px',
  threshold: 0.01
};

let observer;

if ('IntersectionObserver' in window) {
  observer = new IntersectionObserver(onChange, config);
  images.forEach(img => observer.observe(img));
} else {
  console.log('%cIntersection Observers not supported', 'color: red');
  images.forEach(image => loadImage(image));
}

const loadImage = image => {
  image.classList.add('fade-in');
  image.src = image.dataset.src;
}

function onChange(changes, observer) {
  changes.forEach(change => {
    if (change.intersectionRatio > 0) {
      // Stop watching and load the image
      loadImage(change.target);
      observer.unobserve(change.target);
    }

  });
}

更准确地说，代码应该识别浏览器是否支持IntersectionObserver，如果不是，它应该立即加载所有图像而不使用API并写入不支持IntersectionObserver的控制台。因此，上面的代码段无法做到这一点。

就我的调查而言，在使用IE 11和Edge 15进行测试时，他们向控制台吐出一个错误，他们无法识别forEach，尽管他们应该support it。< / p>

我已尝试shim forEach，甚至用优质旧forEach替换for，但我无法将此代码段用于IE和Edge。

有什么想法吗？

Answer 1

经过一些测试，我找到了原因。

首先，我让观察者观察document.body，它有效。然后我猜观察者无法观察到空元素，所以我在我想要观察的元素上设置了1px边框，然后就可以了。

这可能是Edge上的一个错误，因为Chrome和Firefox都可以观察到空元素。

IE上的IntersectionObserver，Edge

1 个答案: