4

IntersectionObserver是相当新的实验性 API，目前并非所有浏览器都完全支持。

它将有很多用途，但目前最突出的一个是延迟加载您的图像，也就是说，如果您的网站上有很多图像。如果您使用Lighthouse审核您的网站，Google 建议您这样做。

现在，网络上有几个片段暗示了它的用法，但我认为它们都没有经过 100% 的审查。例如，我正在尝试使用这个。它在 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，尽管他们应该支持它。

我试图填充 forEach，甚至forEach用 good old替换for，但我无法让这个片段在 IE 和 Edge 上工作。

有什么想法吗？

4

1 回答 1

7

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

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

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

于 2017-10-10T10:35:35.000 回答