Vue3 通过自定义指令实现图片懒加载

介绍一个webAPI：IntersectionObserver

 IntersectionObserver API，可以自动"观察"元素是否可见，Chrome 51+ 已经支持。由于可见（visible）的本质是，目标元素与视口产生一个交叉区，所以这个 API 叫做"交叉观察器"。

检测某个元素是否进入了"视口"（viewport），即用户能不能看到它。

// 创建观察对象实例
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封装懒加载指令

// 扩展vue原有的功能：全局组件，自定义指令，挂载原型方法，注意：没有全局过滤器。
// 这就是插件
// vue2.0插件写法要素：导出一个对象，有install函数，默认传入了Vue构造函数，Vue基础之上扩展
// vue3.0插件写法要素：导出一个对象，有install函数，默认传入了app应用实例，app基础之上扩展

import AppSkeleton from './AppSkeleton.vue'
import AppCarousel from './AppCarousel.vue'
import AppMore from './AppMore.vue'
// 图片加载失败显示的图片
import imgError from '@/assets/images/imgError.png'

export default {
  install (app) {
    // 在app上进行扩展，app提供 component directive 函数
    // 如果要挂载原型 app.config.globalProperties 方式
    app.component(AppSkeleton.name, AppSkeleton)
    app.component(AppCarousel.name, AppCarousel)
    app.component(AppMore.name, AppMore)
    // 自定义指令
    defineDirective(app)
  }
}

const defineDirective = (app) => {
  // 图片懒加载指令
  app.directive('lazyload', {
    // vue2 监听使用指令的DOM是否创建好，钩子函数：inserted
    // vue3 的指令拥有的钩子函数和组件的一样，使用指令的DOM是否创建好，钩子函数：mounted
    mounted (el, binding) {
      console.log('mounted')
      // 创建一个观察对象，来观察当前使用指令的元素是否进入可视区
      const observe = new IntersectionObserver(([{ isIntersecting }]) => {
        // 两个回调参数 entries被观察的元素信息对象的数组 [{元素信息},{}]，信息中isIntersecting判断进入或离开 , observer就是观察实例
        if (isIntersecting) {
          // 通过isIntersecting来判断是否进入可视区, 进入可视区之后停止观察
          observe.unobserve(el)
          // 处理图片加载失败的情况, 如果图片加载失败就显示默认图片
          el.onerror = () => {
            el.src = imgError
          }
          // 把指令的值设置给el元素的src属性 binding.value就是指令传递的值
          el.src = binding.value
        }
      }, {
        threshold: 0
      })
      observe.observe(el)
    }
  })
}

使用指令：

在图片标签上使用之定义指令加上图片地址

<img alt="" v-lazyload="cate.picture">