基于vue3.0和IntersectionObserver封装懒加载指令（图片懒加载）

目标：当图片进入可是区域后才加载图片，且处理加载失败，封装成全局指令，全局插件

首先要先介绍一个 webApi  IntersectionObserver

const observer= new IntersectionObserver((entries, observer) => {
    
}, {})
observer.observe(imgDom)
observer.unobserve(imgDom)

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

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

封装图片的懒加载指令

在全局插件注册的 index.js 文件中

export default {
  install (app) {
    // 省略其他...
+    defineDirective(app)
  }
}

封装指令函数

// 导入默认显示的图片
import defaultImg from '@/assets/images/200.png'
// 指令
const defineDirective = (app) => {
  // 图片懒加载指令
  app.directive('自定义指令名', {
    mounted (el, binding) {
      const observer = new IntersectionObserver(([{ isIntersecting }]) => {
          // 判断图片是否在可视范围内
        if (isIntersecting) {
            // 在可视范围内即可取消监听
          observer.unobserve(el)
            // 如果图片加载失败，则显示默认图片，onerror错误事件
          el.onerror = () => {
              el.src = defaultImg
          }  
          // 图片懒加载的核心原理 --- 图片在可视区域内即将图片路径赋值为自定义指令绑定的值，这个时候才让图片加载
          el.src = binding.value
        }
      }, {
          // 设置监控距离为 图片和可视区域交叉距离为 0.01 时加载图片
        threshold: 0.01
      })
      // 监听绑定的dom元素
      observer.observe(el)
    }
  })
}

使用指令

在需要懒加载的dom 上，绑定自定义指令 v-自定义指令名

 
+      
    

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

1. 原生js的API监听DOM元素进入可视区基本使用

2. Vue3的自定义指令的基本规则 app.directive

3. 需要处理图片的加载和失败的情况