标签：不同 erro 次数 temp 写法 reload att out ima
1、全局安装vue-lazyload
npm install vue-lazyload -g
2、在main.js配置文件引入
import VueLazyload from ‘vue-lazyload‘
Vue.use(VueLazyload, {
//预加载高度
preLoad: 1.3,
//错误时显示的图片
error: ‘/static/about111.jpg‘,
//图片加载中显示的图片
loading: ‘/static/img/loading.gif‘,
//尝试加载次数
attempt: 1
})
3、在组件中使用时，将img标签的src换成v-lazy：
未使用懒加载前的代码：
<li><img class="g-img1"src="/static/1.jpg" ></li>
使用懒加载后的代码：
<li><img class="g-img1" v-lazy="‘/static/1.jpg‘" ></li>
4、在不同的页面中显示不同的加载占位图的写法
<img v-lazy="{src: item.imgUrl, loading: ‘http://www.xxx.com/loading.png‘}" />
5、背景图使用懒加载的写法
v-lazy:background-image="{src: item.imgUrl, error: ‘http://www.xxx.com/error.png‘, loading: ‘http://www.xxx.com/loading.png‘}"
标签：不同 erro 次数 temp 写法 reload att out ima
原文地址：https://www.cnblogs.com/webwangjie/p/11579273.html
