使用IntersectionObserver 实现懒加载 && 记录一个懒加载失效的原因

先说说我实现懒加载失效的一个原因：

是图片没有写高度

猜想是没有给图片高度，所以底层没法进行计算 容器是否出现在视图中

 

实现一个IntersectionObserver

// 配置参数请看下面
const config = {
    root: null,
    rootMargin: '0px',
    threshold: 0
}
const io = new IntersectionObserver(
  callback,
  config
)

 

上面配置config的属性：

1. root：视图根节点，不填默认为浏览器窗口
2. rootMargin：缩小或扩大根元素的区域，默认值为"0px 0px 0px 0px"，只能用px或百分比
3. threshold：可以给0 - 1 之间的数  0 元素刚进入窗口  1 完全进入窗口

 

IntersectionObserver 提供的api

• 指定观察哪个DOM节点

io.observe(element)

• 停止对某个节点的观察

io.unobserve(element)

• 关闭观察器，停止观察服务

io.disconnect()