vue3.0实现图片懒加载

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

1.了解IntersectionObserver（）

参考链接：IntersectionObserver

// 创建观察对象实例
// const observer = new IntersectionObserver(callback[, options])

const observer = new IntersectionObserver(([{isIntersecting}], observer) => {
    // entries = [{isIntersecting: true}]
    
}, {})
// 监听DOM元素
observer.observe(Dom)
// 取消DOM监听
observer.unobserve(Dom)

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

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

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

src/components/xxx/index.js

import defaultImg from '@/assets/images/xxx.png' // 引入当加载失败时显示的默认图片
// 全局指令
const defineDirective = (app) => {
  // 图片懒加载指令
  app.directive('lazyload', {
    mounted (el, binding) { // vue2.0 inserted vue3.0 mounted
      const observer = new IntersectionObserver(([{ isIntersecting }]) => {
        if (isIntersecting) { // isIntersecting判断是否进入视图
          observer.unobserve(el) // 进入视图后，停止监听
          el.onerror = () => { // 加载失败显示默认图片
              el.src = defaultImg
          }  
          el.src = binding.value // 进入视图后，把指令绑定的值赋值给src属性，显示图片
        }
      }, {
        threshold: 0.01 // 当图片img元素占比视图0.01时 el.src = binding.value
      })
      observer.observe(el) //观察指令绑定的dom
    }
  })
}
export default {
  install (app) {
    defineDirective(app) // 调用方法，全局注册指令
  }
}

3.在main.js中引入，完成全局注册

import { createApp } from 'vue'
import MyUI from '@/components/xxx/index.js'
createApp(App).use(store).use(router).use(MyUI).mount('#app')// 全局注册使用

4.Img标签绑定使用

<img alt="" v-lazyload="https://xxx.xxx.com/xxx.jpeg">