javascript：使用eventlistener和debounce延迟加载图像

我有几个

div

类

'comp'

。每个组件内部都有图像。我想要实现的是为每个

comp

中的图像实现延迟加载。因此，当特定的

comp

元素进入视口时，我希望加载图像

在尝试intersection observer 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
  );
}

const选项={
阈值：0
};
const io=新的IntersectionObserver（条目=>{
entries.forEach（entry=>{
如果（entry.intersectionRatio>0）{
loadImage（entry.target）；
entry.target.classList.add（'loaded'）；
io.unobserve（入口、目标）；
}
});
}，选项）；
const targetElements=document.queryselectoral（“.comp”）；
for（目标元素的let元素）{
if（document.body.className.match（/\b受支持的节间观察者\b/））{
观察（要素）；
}否则{
var domRect=element.getBoundingClientRect（）；
}
}
函数loadImage（imageElement）{
设置超时（（）=>{
console.dir（imageElement.querySelector（'img'））；
imageElement.querySelector（'img.target image'）.src=imageElement.querySelector（'img.target image'）.dataset.src；
}, 500);
}
//聚填料
功能元素INVIEWPORT（el）{
var top=标高偏移；
var left=el.offsetLeft；
var宽度=el偏移网络宽度；
var高度=el离地高度；
while（el.offsetParent）{
el=el.offsetParent；
顶部+=标高偏移；
左+=el.offsetLeft；
}
返回(
顶部<（window.pageYOffset+window.innerHeight）&&
左<（window.pageXOffset+window.innerWidth）&&
（顶部+高度）>window.pageYOffset&&
（左+宽）>window.pageXOffset
);
}

我们在prod中使用

IntersectionObserver

已有相当一段时间了，现在使用这个polyfill:。您可能想先试用一下。您可以使用Intersection Observator API来代替它。在较高级别上，我会将图像源列为

data src

属性，然后当它在视口中或即将在视口中时，使用

setAttribute

设置图像的

src

。很乐意为您提供一些代码。我更喜欢使用Intersection Observer API而不是getBoundingClientRect。@RaphaelRafatpanah任何特定的reason@sami无论你要实现什么，它都将是该政策中已经包含的内容。他们在

addEvent上使用了debounce和所有好东西（文档“scroll”，这个.\u checkforcrosss，true）