IntersectionObserver 小demo

IntersectionObserver

既然常用在监听元素对于窗口视窗的可见，就依此封装一个通用方法

通用浏览器视窗监听(出现时修改flag)

setIntersectionObserver({
  list = [], key = 'isShow', domKey = 'dom', newValue = true, datasetIndexKey = 'index'
} = {}) {
  /*
    通用浏览器视窗监听(出现时修改flag)
    list：数组
    datasetIndexKey：即将要修改的项，将索引记录在节点标签的data-key中的key，通过 dom.dataset.key 获取 索引
    key：即将要修改的flag，所在的key
    newValue: flag要修改为的值
    domKey： 数组每项的节点放置的key

    demo:
      <div
        v-for="(n,i) in list"
        :key="i"
        :class="['item', n.isShow ? '出现后的样式' : '未出现的初始样式']"
        :data-index="i"
        ref="item"
      >{{i + 1}}</div>

      list: [
        {
          isShow: false,
          dom: '该元素的DOM节点'
        }
      ]
  */
  const io = new IntersectionObserver((entries) => {
    entries.forEach(item => {
      if (item.intersectionRatio > 0.00001) {
        const index = +item.target.dataset[datasetIndexKey];
        list[index][key] = newValue;
        io.unobserve(item.target);
      }
    });
    /*
      entries 对象
      time：监听器元素的持续时间
      target：被观察的目标元素，是一个 DOM 节点对象
      rootBounds：根元素的矩形区域的信息，可以用getBoundingClientRect()方法得到，如果没有根元素（即直接相对于视口滚动），则返回null
      boundingClientRect：目标元素的矩形区域的信息
      intersectionRect：目标元素与视口（或根元素）的交叉区域的信息
      intersectionRatio：目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0
    */
  }, {
    threshold: [0.001]
    // threshold: [0, 0.5, 1], 配置触发监听的 目标元素的可见比例，可配置多个，触发多次监听。默认 [0]
    // root: 对比交叉的元素，默认是浏览器视窗
    // rootMargin: 配置虚拟视窗尺寸语法同margin，"10px 0 0 10px"
  });
  list.forEach(item => {
    io.observe(item[domKey]);
  });
  /*
    IntersectionObserver实例的方法：
    observe(element)：监听某个元素，传入要监听的元素作为参数
    unobserve(element)：停止监听某个元素，传入停止监听的元素作为参数
    disconnect()：使监听器停止工作
    takeRecords()：返回所有正在监听的元素的IntersectionObserverEntry对象数组
  */
}

使用案例

1. 如demo所示，实现出现动画。
2. 设置在<img src="isShow ? '图片路径' : '' ">，即可实现懒加载。