IE、Edge 上的 IntersectionObserver

Question

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

它将有很多用途，但目前最突出的一种是延迟加载您的图片，也就是说，如果您的网站上有很多图片。如果您使用Lighthouse 审核您的网站，则为recommended by Google。

现在，网络上有几个 sn-ps 建议使用它，但我认为它们都没有经过 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。所以，上面的 sn-p 没有做到这一点。

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

我试过shim forEach，甚至用旧的for 替换forEach，但我无法让这个sn-p 在IE 和Edge 上工作。

有什么想法吗？

Answer 1

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

首先，我让观察者观察document.body，它起作用了。然后我猜观察者是观察不到空元素的，所以我在要观察的元素上设置了1px边框，然后就可以了。

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