javascript：使用eventlistener进行图像的延迟加载和去抖动

Question

我有几个div类，'comp'。每个comp内部都有图像。我要实现的是为每个comp的独立图像实现延迟加载。因此，当特定的comp元素进入视口时，我希望图像被加载。

当我尝试交叉观察器DOM API时，我想使用eventlistener和debounce作为polyfill方法，但是它有一个局限性，即某些最新的Safari和IE版本不支持它。

在这方面的任何帮助将不胜感激。

代码：

const options = {
    threshold: 0
};
const io = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.intersectionRatio > 0) {
      loadImage(entry.target);
      entry.target.classList.add('loaded');
      io.unobserve(entry.target);
    }
  });
}, options);

const targetElements = document.querySelectorAll(".comp");
for (let element of targetElements) {
    if (document.body.className.match(/\bintersection-observer-supported\b/)) {
        io.observe(element);
    } else {
        var domRect = element.getBoundingClientRect();
    }
}

function loadImage(imageElement) {
  setTimeout(() => {
    console.dir(imageElement.querySelector('img'));
    imageElement.querySelector('img.target-image').src = imageElement.querySelector('img.target-image').dataset.src;
  }, 500);
}
//Polyfill
function elementInViewport(el) {
  var top = el.offsetTop;
  var left = el.offsetLeft;
  var width = el.offsetWidth;
  var height = el.offsetHeight;
  while(el.offsetParent) {
    el = el.offsetParent;
    top += el.offsetTop;
    left += el.offsetLeft;
  }

  return (
    top < (window.pageYOffset + window.innerHeight) &&
    left < (window.pageXOffset + window.innerWidth) &&
    (top + height) > window.pageYOffset &&
    (left + width) > window.pageXOffset
  );
}