IntersectionObserver(交叉观察器)懒加载

发布时间 2023-11-01 15:23:26作者: 月下云生

1.IntersectionObserver 接口(从属于 Intersection Observer API)提供了一种异步观察目标元素与其祖先元素或顶级文档视口(viewport)交叉状态的方法。其祖先元素或视口被称为根(root) 

2.监听目标元素与其祖先或视窗交叉状态的手段,其实就是观察一个元素是否在视窗可见

3.

const intersectionObserver = new IntersectionObserver((entries) => {
  // 如果 intersectionRatio 为 0,则目标在视野外,
  // 我们不需要做任何事情。
  if (entries[0].intersectionRatio <= 0) return;

  loadItems(10);
  console.log("Loaded new items");
});
// 开始监听
intersectionObserver.observe(document.querySelector(".scrollerFooter"));

4.兼容性