图片懒加载是常见的性能优化方法,在图片很多或加载图片出现网络延迟的情况下,使用懒加载可以减少网络请求、提高用户体验感。
实现原理:在图片没进入可视区域前,使用默认的图片;在进入可视区域并加载好之后,再替换图片的默认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