vue3.0 图片懒加载指令

vue项目-图片懒加载

图片懒加载的原理：当图片进入可视区域，然后将图片地址赋值给 img 的 src 属性
需求：当图片进入可视区域内去加载图片，且处理加载失败的情况

监听图片进入可视区域的行为

• 原生WebAPI： IntersectionObserver
• 基本使用

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

const obs = new IntersectionObserver((entries, observer) => {
    // entries = [{isIntersecting: true}]
    
}, {})
obs.observe(imgDom)
obs.unobserve(imgDom)

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

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

功能实现

• 为了便于在项目中所有图片的使用，可将其封装成自定义指令(Vue3.0版本)

// src/components/index.js

import defaultImg from '@/assets/images/001.jpg'

export default {
  install(app) {
    app.directive('lazyload', {
      mounted(el, bindings) {
        // el - dom元素，bindings - 指令的值
        const observer = new IntersectionObserver(([{ isIntersecting }]) => {
          if(isIntersecting) {
            observer.unobserve(el)
            // 表示绑定的 dom 进入可视区域
            el.src = bindings.value
            // 图片加载出错时，显示默认图片
            el.onerror = () => {
              el.src = defaultImg
            }
          }
        }, {
          threshold: 0
        })
        // 监视 dom
        observer.observe(el)
      }
    })
  }
}

// main.js

import { createApp } from 'vue'
import App from './App.vue'
import directUI from '@/components/index.js'

createApp(App).use(directUI).mount('#app')

• 组件中使用

// 组件中

<template>
    <img v-lazyload alt="" />
</template>