v3 的自定义图片懒加载指令

import defaultImg from '@/assets/images/200.png'
export default {
  install (Vue) {
    // directive 注册自定义指令
    Vue.directive('lazy', {
      // mounted v3 里面的一个钩子 (传入的该元素的 DOM; 自定义指令传入的参数在这里就是一张图片)
      mounted (el, binding) {
        // new 一个 IntersectionObserver 获取里面的方法等 (第一个参数就是一个回调, 处理业务逻辑; 第二个就是)
        const observer = new IntersectionObserver(
          // isIntersecting 他就是一个布尔值为 true 的时候就是刚进入该元素的视野, 为 false 的时候就是离开视野
          ([{ isIntersecting }]) => {
            // 在这里的自定义指令判断如果为 false 的时候那么就直接给一个静态准备好的图片
            if (isIntersecting) {
              el.onerror = function () {
                // defaultImg 就是上面准备好的静态图片
                el.src = defaultImg
              }
              // 反之就直接把获取的图片地址赋值给标签 DOM 的 src
              el.src = binding.value
            }
          },
          // 默认阈值为 0
          {
            threshold: 0.01
          }
        )
        observer.observe(el)
      }
    })
  }
}