基于vue3.0和IntersectionObserver(JS原生API)封装图片懒加载指令

首先介绍一个webAPI：IntersectionObserver

// 创建观察对象实例
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

可以基于这个原生API在vue3.0自定义指令上封装自己的图片懒加载

import defaultImg from '@/assets/images/200.png'

// vue提供install可供我们开发新的插件及全局注册组件等  
// install方法第一个参数是vue的构造器(Vue3中全部挂载app)，第二个参数是可选的选项对象
export default {
  install (app) {
    // 在app上进行扩展，app提供 component directive 函数
    // 如果要挂载原型 app.config.globalProperties 方式
    defineDirective(app)
  }
}




// 指令
// 1. 原理: 就是图片地址不能在src上, 当图片进入可视区的时候,在将存储的图片地址设置给图片元素的src即可
const defineDirective = (app) => {
  // 图片懒加载指令v-lazy
  app.directive('lazyload', {
  // vue2.0 监听使用指令的DOM是否创建好,使用的是 inserted 钩子函数
  // vue3.0 监听使用指令的DOM是否创建好,使用的是和组件内部的钩子函数一样 mounted (创建完毕DOM钩子函数,这里不是组件内部不需要加on)
  // el参数是使用指令的DOM元素 ------- binding是使用指令时候传递过来的值
    mounted (el, binding) {
      // 2. 创建一个观察对象，来观察当前使用的指令的元素
      const observer = new IntersectionObserver(([{ isIntersecting }]) => {
        if (isIntersecting) {
          observer.unobserve(el)
      // 3. 把指令的值设置给el的src属性上, binding.value就是具体的值
      // 4. 图片加载失败的时候我们也可以给图片重新赋值一个默认的图片 error图片加载失败事件 load加载成功事件
          el.onerror = () => {
              el.src = defaultImg
          }  
          el.src = binding.value
        }
      }, {
        threshold: 0
      })
      // 开启观察
      observer.observe(el)
    }
  })
}

组件内部直接使用自定义指令即可

<img alt="" v-lazyload="图片的地址">