图片懒加载自定义指令

利用IntersectionObserver去做图片懒加载监听

监听方法对比

MutationObserver和IntersectionObserver都是Web API中的观察者（Observer），它们可以用于监测DOM元素的变化和可见性变化。

MutationObserver用于监测DOM元素的变化，比如节点的添加、删除、属性的修改等。

IntersectionObserver 用作监控可见性变化，例如元素进入或离开视口，图片懒加载。

局部组件自定义指令

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

<script setup lang='ts'>
import type { Directive } from 'vue'
//懒加载数据测试
const images: Record<string, { default: string }> = import.meta.glob('./assets/images/*.*',{eager:true})  
//一次性引入多个图片  glob懒加载 若{eager:true}直接变为globEager为立即加载
let arr = Object.values(images).map(v => v.default)  
//Object.values取对象的属性值，返回数组，并且default（图片绝对地址）给arr

//懒加载自定义指令
let vLazy:Directive<HTMLImageElement,string> = async (el,binding)=>{ //el为dom元素，binding为自定义指令的参数
// 这会在 `mounted` 和 `updated` 时都调用
  let url = await import('./assets/vue.svg')  //懒加载图片，可以自行选择图片
  el.src = url.default;
  let observer = new IntersectionObserver((entries)=>{  //IntersectionObserver监听dom是否进入可视区域
    if(entries[0].intersectionRatio > 0 ){  //返回数组，取entries[0]
      setTimeout(function(){
        el.src = binding.value
      },500)   //可自定义懒加载图片显示时间
    }
  })
  observer.observe(el)
}
</script>

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

全局自定义指令

const app = createApp(App)

app.directive('Lazy',
    async (el,binding)=>{
        let url = await import('./assets/vue.svg')
        el.src = url.default;
        let observer = new IntersectionObserver((entries)=>{
          console.log(entries[0])
          if(entries[0].intersectionRatio > 0 ){
            setTimeout(function(){
              el.src = binding.value
            },1000)
          }
        })
        observer.observe(el)
      }
)