什么是IntersectionObserver

首先，说IntersectionObserver之前先谈谈懒加载，传统的实现方式便是通过监听scroll事件调用dom的getBounddingClientRect()方法，通过坐标位置判断是否在视口从而选择加载方式，也就是说它必须监听scroll，即使防抖了触发平路也很高，所以新出了一个API,IntersectionObserver，它可以监听dom是否在可视区域内。

用法

text
const io = new IntersectionObserver(callback, option);

他说个构造函数，第一个参数是当所有dom中的可见状态发生改变时触发的回调，初始化立即执行一次

text
const io = new IntersectionObserver((entries) => {
  });

entries是一个数组，第一项为其对于信息，我们战且只关注一个属性isIntersecting它表示该dom是否是可见状态，接下来看实力上的方法

observe

开启监视，它接受一个参数，值是Element类型，也就是监视的dom

text
io.observe(dom)

unobserve

停止观察，参数和observe一致

disconnect

text
// 关闭观察器，也就是结束这个实例的所有监听
io.disconnect()

应用

图片懒加载指令设计

text
const ob = (el: Element, bind: any) => {
  const io = new IntersectionObserver(([{ isIntersecting }]) => {
    const show = () => {
      io.unobserve(el);
      (el as HTMLImageElement).src = bind.value;
      io.disconnect();
    };
    if (isIntersecting) {
      show();
    } else {
      (el as HTMLImageElement).src = LoadingImg;
    }
  });
  io.observe(el);
};