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

J-Rainbow

已于 2023-06-19 11:27:59 修改

阅读量243

点赞数

分类专栏：前端文章标签： javascript 前端 vue.js

于 2023-06-19 10:21:55 首次发布

本文链接：https://blog.csdn.net/qq_42048638/article/details/131281968

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<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>