vue3实现图片懒加载

Vue3中实现图片懒加载通常可以利用Intersection Observer API，这是一种浏览器原生提供的功能，用于检测元素是否进入视口。以下是一个简单的步骤说明：

安装依赖：首先需要安装vue-lazyload库，可以使用npm或yarn安装：
npm install vue-lazyload
# 或者
yarn add vue-lazyload
登录后复制

引入并配置：在Vue组件中引入vue-lazyload插件，并在data选项中设置懒加载策略：
import VueLazyload from 'vue-lazyload'

export default {
components: {
LazyImage: {
lazy: true,
error: '<img src="placeholder.png" alt="">', // 默认加载失败时显示的占位图
loading: '<div class="lazy-loading">加载中...</div>', // 预览加载中效果
height: 0, // 图片高度设置为0，让浏览器自动计算
placeholder: undefined, // 可选，设置默认占位图
}
},
mounted() {
new VueLazyload({
container: this.$el, // 指定需要观察的父元素
observeViewport: true, // 是否监听滚动事件
offset: 200, // 视口边缘距离图片顶部的距离，单位px，默认值500
})
},
}
登录后复制

使用懒加载组件：在模板中使用<lazy-image>标签替代常规的<img>标签：
<template>
<div>
<lazy-image :src="imageSrc" />
</div>
</template>
登录后复制

当图片位于视口外时，不会立即加载，只有当它们进入视口一定范围时才会开始加载。这样可以节省初始页面的加载时间和带宽。