vue3 图片懒加载hook

导读：【大量图片的请求加载会给服务器造成很大的压力，并且用户体验不佳】 通过【图片懒加载】的方式能够大大的提升性能，原理是：当图片滚动到视窗区内才去请求图片资源，减少了一次性图片资源的请求次数，优化性能。

1. 获取数据：调接口获取图片URL列表

// 本地图片加载，模拟接口获取到的图片列表
let imageList: Record<string, { default: string }> = import.meta.glob('@/assets/images/yes/*.*', { eager: true })
let lists = Object.values(imageList).map(i => i.default)

2. 核心逻辑：图片懒加载hook

let vLazyLoad: Directive<HTMLImageElement, string> = async (el, bind) => {
   // def 默认图片
   const def = await import('@/assets/images/200.png')
   el.src = def.default
   // IntersectionObserver 监听元素是否在视口内
   const observer = new IntersectionObserver(entry => {
    console.log(entry[0].intersectionRatio)
    if (entry[0].intersectionRatio > 0) {
      el.src = bind.value
      observer.unobserve(el)
    }
   })

    observer.observe(el)
   }

3. 页面运用

<img width="600" height="400" v-for="item in lists" v-lazy-load="item" alt="" />