使用IntersectionObserver API 手写图片懒加载

代码中所有的打印结果在代码下面 

<template>
  <div>
  	// 图片展示
    <img v-lazy="item" width="350" height="500" v-for="item in arr" src="" alt="">
  </div>
</template>

<script setup lang='ts'>
// 引入自定义治指令
import type {Directive} from 'vue'
// 引入图片  通过vite 的一个方法  meta.globEager方法引入静态图片
// meta有两个方法 一个是glob  一个是 globEager
// glob是懒加载模式
// globEager是静态加载

let imageList = import.meta.globEager('../assets/images/*.*')
// 下方第一个图为打印结果
console.log(imageList);

// 获取拿到图片数组中的每一个图片路径
let arr = Object.values(imageList).map(v=>v.default)
// 下方第二个图为打印结果
console.log(arr);

// 定义图片懒加载义指令
let vLazy: Directive<HTMLImageElement,string> = async (el,bingding)=>{
  // 下面第三个图为打印结果
  console.log(enr[0],bingding.value);
  // 引入一个默认图片 当图片未进入可视区域时  可以当做默认图片展示
  const def = await import('../assets/images/year.png')
  // 将获取到的默认图片给到页面做展示
  el.src = def.default;
  // 这个IntersectionObserver的intersectionRatio方法 可以判断图片是否进入可是区域
  const observer = new IntersectionObserver((enr)=>{
    
    // 判断这个值是否大于0  如果大于0 则代表这个图已经进入可是区域
    if(enr[0].intersectionRatio>0){
      // 加个延时让效果更加明显
      setTimeout(() => {
        // 获取当前图片的路径 替换掉默认图片 展示原本的图片
        el.src = bingding.value
        // 停止监听
        observer.unobserve(el)
      }, 1000);
    }
    
  })
  // 监听
  observer.observe(el)
  console.log(el);
}
</script>
<style scoped lang='less'>
</style>

17行 imageList 打印结果

23行 arr 打印结果

28行打印结果

intersectionRatio大于0代表进入可视区域 0则代表没有进入可视区域 下方图片的0.075代表进入可视区域0.075% 1代表完全进入可视区域