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

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

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

javascript"><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>