图片懒加载，实现在可视区域内再进行渲染加载

<script setup>
import {
    
    onMounted} from "vue"

onMounted(()=>{
    
    
  // 当元素的可见性发生变化，会触发回调函数
  let IO = new IntersectionObserver((entries, observer)=>{
    
    
    // 循环观察的元素
    entries.forEach(item => {
    
    
      // 判断是否在可视区域
      if (item.isIntersecting) {
    
     
        item.target.src = item.target.dataset.src
        IO.unobserve(item.target)  // 停止观察当前元素，防止一直调用
      }
    });
  }, {
    
    
    root: document.getElementById("wrap") // 可视区域 （默认浏览器视口）
  });
  let imgList = document.querySelectorAll(".my-img") // 被观察元素
  imgList.forEach((item) => {
    
    
    IO.observe(item) // 观察每一个图片元素
  })
})


</script>

<template>
  <div class="wrap" id="wrap">
    <div class="box">
      <img src="../public/images/logo.jpg" data-src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="图片" class="my-img" />
      <img src="../public/images/logo.jpg" data-src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" alt="图片" class="my-img" />
      <img src="../public/images/logo.jpg" data-src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg" alt="图片" class="my-img" />
      <img src="../public/images/logo.jpg" data-src="https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg" alt="图片" class="my-img" />
      <img src="../public/images/logo.jpg" data-src="https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg" alt="图片" class="my-img" />
      <img src="../public/images/logo.jpg" data-src="https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg" alt="图片" class="my-img" />
      <img src="../public/images/logo.jpg" data-src="https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg" alt="图片" class="my-img" />
      <img src="../public/images/logo.jpg" data-src="https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg" alt="图片" class="my-img" />
      <img src="../public/images/logo.jpg" data-src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="图片" class="my-img" />
    </div>
  </div>
</template>

<style scoped>
.wrap {
    
    
  width: 200px;
  height: 90px;
  overflow: auto;
  margin: auto;
}
.box {
    
    
  height: 100px;
  width: 100%;
}
.my-img {
    
    
  width: 100px;
  height: 100px;
}
</style>