1.下载插件
npm install vue-lazyload --save
2.全局配置
在main.js中进行配置
import VueLazyload from ‘vue-lazyload’
Vue.use(VueLazyload, {
preLoad: 1.3,
loading: require(‘图片加载时的占位图,最好放在src/assets下’),
attempt: 1
})
3.组件中使用
使用v-lazy代替:src
<ul>
<li v-for="(item,index) in demoArr" :key = "index">
<img v-lazy = "item"/>
</li>
</ul>
4.天坑
1.循环一定不能放图片上!!!!
错误示例
错误
错误
错误
<img v-for="(item,index) in demoArr" :key = "index" v-lazy = "item" />
这样写会完全没有懒加载的效果
2.图片显示有问题时注意require
demoArr :[
require("@/assets/images/1.jpg"),
require("@/assets/images/2.jpg"),
require("@/assets/images/3.jpg"),
require("@/assets/images/4.jpg"),
require("@/assets/images/5.jpg"),
require("@/assets/images/6.jpg"),
require("@/assets/images/7.jpg"),
require("@/assets/images/8.jpg"),
require("@/assets/images/9.jpg"),
require("@/assets/images/10.jpg"),
require("@/assets/images/11.jpg"),
require("@/assets/images/12.jpg"),
require("@/assets/images/13.jpg"),
require("@/assets/images/14.jpg"),
]
3.占位图片加载有问题时
最好将占位图放在src/assets目录下
使用下面的方式对懒加载进行全局配置
Vue.use(VueLazyload, {
preLoad: 1.3,
loading: require('@/assets/images/loading.jpg'),
attempt: 1
})