vue使用vue-lazyload图片懒加载并且设置loading大小

// 安装npm包
npm install vue-lazyload --save 
// 引入
import { VueLazyload } from 'vue-lazyload'
// 配置
vue.use(VueLazyload, {
	preLoad: 1.3,
	attempt: 2,
	error: require('../img/icons/error.png'), 
	loading: require('../img/icons/loading.png') // 注意路径使用require（我这里使用相对路径）
})
// img使用v-lazy就可以实现懒加载
<div class="img-box">
	<img v-lazy="imgSrc" /> 
</div>
// 背景图片使用v-lazy:background-image就可以实现懒加载
<div v-lazy:background-image="imgSrc"></div>

// css设置loading大小
.img-box {
	background: #f4f4f4;
	height: 100px;
	// loading大小
	img[lazy="loading"] {
		width: 30px;
		height: 30px;
	}
	// 实际图片大小
	img[lazy="loaded"] {
		width: 100%;
		height: 100px;
	}
}