手搓v-lazy实现图片懒加载

<script setup lang="ts">

import type { Directive } from 'vue';


let imageList:Record<string,{default:string}> = import.meta.glob('@/assets/images/*.*',{eager:true});

const list = Object.values(imageList).map(i =>i.default)


let vLazy:Directive<HTMLImageElement,string> = async (el,binding) =>{

  const def =await import('@/assets/logo.svg')
  el.src = def.default;


  const observer = new IntersectionObserver((enr)=>{
    if(enr[0].intersectionRatio > 0){
        el.src = binding.value
      observer.unobserve(el)
    }
    

  })
  observer.observe(el)
}





</script>

<template>
   <img v-lazy="item" v-for="(item, index) in list" :key="index" width="400" height="800">

</template>

<style scoped></style>