使用IntersectionObserver 与vue3封装一个图片懒加载指令

目的：  当图片进入可视区域内去加载图片，且处理加载失败，封装成指令。

介绍一个webAPI：IntersectionObserver(opens new window)

// 创建观察对象实例
 const observer = new IntersectionObserver(callback[, options])
 callback 被观察dom进入可视区离开可视区都会触发
 - 两个回调参数 entries , observer
 - entries 被观察的元素信息对象的数组 [{元素信息},{}]，信息中isIntersecting判断进入或离开
 - observer 就是观察实例
  options 配置参数
 - 三个配置属性 root rootMargin threshold
 - root 基于的滚动容器，默认是document
 - rootMargin 容器有没有外边距
  - threshold 交叉的比例

// 实例提供两个方法
  observe(dom) 观察哪个dom
  unobserve(dom) 停止观察那个dom

基于vue3.0和IntersectionObserver封装懒加载指令

src/components/library/index.js

export default {
  install (app) {
    app.component(XXX.name, XXX)
    defineDirective(app)
  }
}

import defaultImg from '@/assets/images/200.png'
// 指令
const defineDirective = (app) => {
  // 图片懒加载指令
  app.directive('lazyload', {
    mounted (el, binding) {
      const observer = new IntersectionObserver(([{ isIntersecting }]) => {
        if (isIntersecting) {
          observer.unobserve(el)
          el.onerror = () => {
              el.src = defaultImg
          }  
          el.src = binding.value
        }
      }, {
        threshold: 0.01
      })
      observer.observe(el)
    }
  })
}

使用指令：

        <RouterLink class="cover" to="/">
           <img alt="" v-lazyload="cate.picture">
            <span>{{cate.name}}</span>
            <span>{{cate.saleInfo}}</span>
          </strong>
        </RouterLink>

总结：

• 在img上使用使用v-lazyload值为图片地址，不设置src属性。