借助插件实现图片懒加载 vue2 vue3

图片懒加载是常见的性能优化方法，在图片很多或加载图片出现网络延迟的情况下，使用懒加载可以减少网络请求、提高用户体验感。

实现原理：在图片没进入可视区域前，使用默认的图片；在进入可视区域并加载好之后，再替换图片的默认src路径，展示真实图片。

vue2使用插件实现图片懒加载   vue-lazyload

安装

npm i vue-lazyload -S

在main.js里面全局注册

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

使用 组件内将src改为v-lazy

<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  </li>
</ul>

vue3使用插件实现图片懒加载   v-lazy

安装

npm install vue3-lazy -S

在main.js里面全局注册

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).use(lazyPlugin, {
  loading: require('@/assets/images/default.png'), // 图片加载时默认图片
  error: require('@/assets/default.png') // 图片加载失败时默认图片
  // 还可以有其他配置
})

使用 组件内将src改为v-lazy

<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  </li>
</ul>

原作者github地址（源码）：https://github.com/ustbhuangyi/vue3-lazy