利用vue3指令实现一个图片懒加载效果

利用vue3指令实现一个图片懒加载效果

<template>
  <div>
    <div>
      <img v-lazy="item" width="360" height="500" v-for="item in arr" alt="">
    </div>
  </div>
</template>


<script setup lang='ts'>
import { Directive } from "vue";
let imageList: Record<string, { default: string }> = import.meta.glob('./assets/images/*.*', { eager: true })
let arr = Object.values(imageList).map(v => v.default)
console.log(arr);

let vLazy: Directive<HTMLImageElement, string> = async (el, bingding) => {
  const def = await import('./assets/vue.svg')
  el.src = def.default;
  const observer = new IntersectionObserver((enr) => {
    if (enr[0].intersectionRatio > 0) {
      setTimeout(() => {
        el.src = bingding.value
      }, 1500);
      observer.unobserve(el)
    }
  })
  observer.observe(el)
}
</script>


<style lang='scss' scoped></style>