vue实现图片懒加载

在src中创建一个directives文件夹在里面创建一个lazy.js文件

在main.js中引入

import lazy from './directives/lazy'

app.directive('lazy', lazy)

在app.vue中

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script><template><div class="img-container"><!-- src是刚开始没有加载出的图片 data-src是加载后的图片，已经进入显示区域的图片 --><!--  v-lazy 懒加载 将它绑的在每个需要懒加载的图片上 --><imgv-lazysrc="https://copyright.bdstatic.com/vcg/creative/cc9c744cf9f7c864889c563cbdeddce6.jpg@h_1280"alt=""class="lazyload"/></div><div class="img-container"><imgv-lazysrc="https://inews.gtimg.com/om_bt/OHyQqgC_5oi4Vm0tlH49XvJzqNBHo2Zryxx5F_be5N2cIAA/1000"alt=""class="lazyload"/></div><div class="img-container"><imgv-lazysrc="https://inews.gtimg.com/om_bt/OHyQqgC_5oi4Vm0tlH49XvJzqNBHo2Zryxx5F_be5N2cIAA/1000"alt=""class="lazyload"/></div><div class="img-container"><imgv-lazysrc="https://inews.gtimg.com/news_bt/OLxGAuCdJ1SwoZRdrZoqGrpBGX-BgYjWnSFuiDDoS3xQsAA/1000"alt=""class="lazyload"/></div><div class="img-container"><imgv-lazysrc="https://img.pconline.com.cn/images/upload/upc/tx/itbbs/2101/25/c1/251135935_1611532823091_mthumb.jpg"alt=""class="lazyload"/></div><div class="img-container"><imgv-lazysrc="https://img2.baidu.com/it/u=4045137561,4227164018&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1280"alt=""class="lazyload"/></div><!-- <RouterView /> -->
</template><style scoped>* {margin: 0;padding: 0;list-style: none;}.lazyload {width: 200px;height: 200px;}@media (min-width: 1024px) {header {display: flex;place-items: center;padding-right: calc(var(--section-gap) / 2);}.logo {margin: 0 2rem 0 0;}header .wrapper {display: flex;place-items: flex-start;flex-wrap: wrap;}nav {text-align: left;margin-left: -1rem;font-size: 1rem;padding: 1rem 0;margin-top: 1rem;}
}
</style>

在lazy.js中

export default {//定义了一个 mounted 方法，在相关组件挂载到页面后执行一些操作，参数 el 通常指的是被挂载的元素。mounted(el) {//查看图片是否被绑的// console.log(el,'这个是el');//将图片保存在src属性上const imgSrc=el.src;//el.src=''; 因为直接进入不加载图片，要将图片清空el.src='';//观察者 观察当前图片是否进入可视区const observer = new IntersectionObserver(([{ isIntersecting }]) => {//元素出现在可视区域，和元素离开可视区域console.log("进入可视区域");//isIntersecting 是 IntersectionObserverEntry 对象的一个属性，它表示目标元素与根元素是否相交。//如果 isIntersecting 的值为 true，则表示目标元素与根元素相交；//如果 isIntersecting 的值为 false，则表示目标元素与根元素不相交。//图片出现在可视区，和图片离开可视区if(isIntersecting){// 加载图片el.src =imgSrc;//停止观察observer.unobserve(el);}});//在进行某种观察或监听操作observer.observe(el);},
};