vue3手动写一个图片懒加载的插件

关于图片懒加载，网上自然是有许多形形色色的成品的，但是现在我们自己来实现一个图片懒加载的功能

实现原理：
主要利用了js提供的一个新方法，IntersectionObserver用于监听元素是否在页面可视区域，
用法：
Const observe = new IntersectionObserver((enr)=>{
enr是一个数组，其中包含一个属性intersectionRatio属性，表示该元素再可视区域中的显示占比
))
Observe.observe(el)

<template>
  <div class="box">
    <img v-lazy="item" width="360" height="500" v-for="(item, index) in arr" :key="index">
  </div>
</template>
<script setup lang="ts">
// 引入Directive类型
import { Directive } from 'vue'
// 获取图片静态资源
let imageList: Record<string, { default: string }> =
  import.meta.globEager('./assets/*.jpg')
// 处理图片路径
let arr = Object.values(imageList).map(item => item.default)
// 自定义懒加载指令
let vLazy: Directive<HTMLImageElement, string> = async (el, bingding) => {
  // 引入一个资源作为懒加载之前的展示图片
  const def = await import('./assets/vue.svg')
  // 给图片设置一个懒加载前的图片
  el.src = def.default
  // js提供了一个新的api监控元素是否在可视区域
  const observe = new IntersectionObserver((enr) => {
    // enr 是个数组,其中有个属性叫做intersectionRatio,为元素再可视区域中占的比例
    console.log('enr', enr[0]);
    if (enr[0].intersectionRatio > 0) {
      el.src = bingding.value
      // 完成图片展示之后,卸载这个监听
      observe.unobserve(el)
    }
  })
  observe.observe(el)
}
</script>

那么到这里我们的懒加载指令就完成了，可以自己运行出来看看效果，也阔以根据自己的需求调整可视区域的大小
再见，再见···