本文介绍了如何在 Vue.js 应用中使用 vue-lazyload 插件进行图片懒加载。首先通过 npm 安装 vue-lazyload，然后在 main.js 文件中配置，设置加载占位图片。接着在组件中，将 img 标签的 src 属性替换为 v-lazy，从而实现延迟加载，提升页面性能。
安装
npm i vue-lazyload -S配置
在main.js文件中进行基本配置
import VueLazyload from 'vue-lazyload'
// 注册懒加载事件
Vue.use(VueLazyload, {
// 设置加载的占位图片
loading: require('./assets/images/loading.png')
})使用
将img标签传统的src属性换成v-lazy
<ul>
<li v-for="img in list">
<img v-lazy="img.src" >
</li>
</ul>
扫一扫
1268
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
