vue3实现图片懒加载

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

1. 安装依赖：首先需要安装`vue-lazyload`库，可以使用npm或yarn安装：

   npm install vue-lazyload
   # 或者
   yarn add vue-lazyload

2. 引入并配置：在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
       })
     },
   }

3. 使用懒加载组件：在模板中使用`<lazy-image>`标签替代常规的`<img>`标签：

   <template>
     <div>
       <lazy-image :src="imageSrc" />
     </div>
   </template>

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