vue3 自定义指令 实现图片懒加载

1.首先创建一个自定义指令

export let imgLazyLoad = (el,bing,vnode) => {
    let imgSrc = bing.value  //获取到自定义指令的值
    el.src = "" //先给img标签的src属性值清空
    
    //利用new IntersectionObserver来判断当前的Img是否出现在窗口可视区
    //entries(Array类型)参数里结构出isIntersecting(Boolean类型)，代表是否出现在窗口可视区

    let observer = new IntersectionObserver(([{ isIntersecting}]) => {
        if(isIntersecting){
            el.src = imgSrc //出现在可视区，那么赋值真实的图片地址
            observer.unobserve(el) //出现过之后，不再观察
        }
    })
    observer.observe(el)
}

2.页面里使用(模拟图片长列表)

<template>
  <div class="imgLazyLoad">
      <div class="imgBox">
          <div class="switch item" v-for="item in 3" :key="item">
              <img src="" alt="图片加载中..." v-img-lazy-load:src="'http://static.zhengjie.online/image/'+`${item}`+'.png'" class="img">
          </div>
      </div>
  </div>
</template>

3.查看效果

1.初始化，只加载了出现在可视区的图片

2.继续滑动滚动条，紧接着加载下一张图片