vue自定义简单的v-lazy懒加载图片指令

主要使用到了IntersectionObserver这一个API https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver/IntersectionObserver

 

其主要的思路就是：

使用监测是否进入可视区域这一API特性，将原来需要image上的src属性的值不直接传给src属性，而是使用自定义指令v-lazy（其他的也可以，随便你），将其保存于指令中，一旦监听到DOM进入可视区域，则将该值赋予所挂在的el的src上。

 

Vue中自定义指令

 

const defineDirective = (app) => {
  //图片懒加载指令,v-lazy
  app.directive('lazy', {
    //Vue2.0用inserted监听DOM是否创建完毕
    //Vue3.0中用mounted
    mounted(el, binding) {
      //观察当前元素
      const observer = new IntersectionObserver(([{isIntersecting}]) => {
        if(isIntersecting){
          //v-for生成的多组纵列图片只进行一次观察：停止观察
          observer.unobserve(el)
          //若图片加载失败，使用该默认图片
          el.onerror = () => {
            el.src = defaultImg
          }
          //组件使用指令传来的值进行操作，赋值于src
          el.src = binding.value
        }
      }, {
　　　　　　//进入区域立即观察，一个选项而已
        threshold: 0
      })
      //挂载元素。只进行一次观察：开始观察
      observer.observe(el)
    }
  })
}