说明
在vue
项目中经常会涉及到图片的懒加载,可以通过vue-lazyload
来实现图片的懒加载。
安装
可以通过下面的命令来安装:
npm install vue-lazyload -S
配置
想要了解更多,可以点击这里查看。
安装完成后可以通过下面的方式进行配置。
import lazyload from 'vue-lazyload' // 引入
// 进行初步的配置
Vue.use(lazyload, {
preLoad: 1.5,
attempt: 1,
loading: require('@/static/lodding.gif'),
})
配置说明:
使用
在项目中使用,可以将img
标签动态绑定的src
属性改为如下的写法:
<ul>
<li v-for="img in list">
<img v-lazy="img.src" >
</li>
</ul>