懒加载处理

利用浏览器原生提供的构造函数 IntersectionObserver， 不要再傻傻监听页面滚动

一、IntersectionObserver简介

1. 语法

let observer = new IntersectionObserver(callback, option);
/*
  callback 是当被监听元素的可见性变化时，触发的回调函数
  option 是一个配置参数，可选，有默认的属性值
*/

2. callback 参数

目标元素的可见性变化时，就会调用观察器的回调函数callback。

callback一般会触发两次。一次是目标元素刚刚进入视口（开始可见），另一次是完全离开视口（开始不可见）。

let observer = new IntersectionObserver(
  entries => {
    /*
      entries是一个数组，每个成员都是一个IntersectionObserverEntry对象
      如果同时有两个被观察的对象的可见性发生变化，entries数组就会有两个成员
    */
    console.log(entries);
  });

3. IntersectionObserverEntry对象

IntersectionObserverEntry对象提供目标元素的信息，一共有六个数组和链表的区别属性

  • time: 可见性发生变化的时间，是一个高精度时间戳，单位为毫秒;

  • target: 被观察的目标元素，是一个 DOM 节点对象;

  • rootBounds: 根元素的矩形区域的信息，getBoundingClientRect()方法的返回值，如果没有根元素（即直接相对于视口滚动），则返回n数组去重方法ull;

  • boundingClientRect: 目标元素的矩形区域的信息;

  • intersectionRect: 目标元素与视口（或根元素）的交叉区域的信息仓鼠饲养八大禁忌;

  • in长沙师范学院tersectionRati容器o: 目标元素的可见比例，即intersectionRect占boun线程的几种状态dingClientR浏览器ect的比例，完全可见时为1，完全不可见时小于等于0;

4. option 对象

4.1 threshold 属性

new IntersectionObserver(
  entries => {
    // do something
  }, 
  {
    threshold: [0, 0.25, 0.5, 0.75, 1]
  }
);
/*
  threshold属性决定了什么时候触发回调函数。
  它是一个数组，每个成员都是一个门槛值，默认为[0]，即交叉比例（intersectionRatio）达到0时触发回调函数。
  用户可以自定义这个数组。
  比如，[0, 0.25, 0.5, 0.75, 1]就表示当目标元素 0%、25%、50%、75%、100% 可见时，会触发回调函数。
*/

4.2 root 属性，rootMargin 属性

new IntersectionObserver(
  entries => {
    // do something
  }, 
  {
    root: document.querySelector('#box'),
    rootMargin: '10px 20px 30px 40px'
  }
);
/*
  root属性指定目标元素所在的容器节点（即根元素）。注意，容器元素必须是目标元素的祖先节点。
  rootMargin定义根元素的margin，
  用来扩展或缩小rootBounds这个矩形的大小，从而影响intersectionRect交叉区域的大小。
  它使用CSS的定义方法，比如10px 20px 30px 40px，表示 top、right、bottom 和 left 四个方向的值。
  这样设置以后，不管是窗口滚动或者容器内滚动，只要目标元素可见性变化，都会触发观察器。
*/

5. 注意

IntersectionObserver API 是异步的，不随着目标元素的滚动同步触发。

规格写明，Int陈思思ersectionObserver的陈思思实现，应该采用requestIdleCallback()，即只有线程空闲下来，才会执行观察器。
这意味着，这个观察器的优先级非常低，只在其他任务执行完，浏览器有了空闲才会执行。

二、应用，以指令形式

<template>
  <div v-lazy-component="init">
  </div> 
</template>
<script>
export default {
  directive: {
    'lazy-component': {
      // 只调用一次
      bind(el, binding) {
        // 判断是否可以使用
        if ('IntersectionObserver' in window) {
          // IntersectionObserver对象，浏览器原生提供的构造函数
          let observer = new IntersectionObserver((entries) => {
            // intersectionRatio: 目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0
            // 是否交叉
            const isIntersected = entries.some(entry => entry.intersectionRatio > 0);
            if (isIntersected) {
              // 执行绑定的事件
              binding.value();
              // 停止观察
              observer.unobserve(el);
              // 关闭观察器
              observer.disconnect();
            }
          });
          // 开始观察， el: DOM对象
          observer.observe(el);
        } else {
          binding.value();
        }
      }
    }
  },
  methods: {
    init() {
      // do something
    }
  }
}
</script>