vue2 实现懒加载之 vue-lazylaod插件

1. 下载vue-lazyload插件

npm i vue-lazyload --save

2. 在全局引入插件(main.js)

...
import lazyload form 'vue-lazyload'
// 全局使用插件
Vue.use(lazyload, {
preload: 1.3,   // preload配置项用来设置预加载的高度(默认值为1.3)
loading: '',   // loading配置项用来配置加载时显示的图片路径
error: '',    // error配置项用来配置加载错误时的显示的图片路径
attemp: 3   // attemp配置项用来设置加载错误时的重传次数
})
...

3. 将需要懒加载的img标签上的:src属性变为:data-src,外层容器div必须加上 v-lazy-container=“{ selector: ‘img’ }” 属性

			<div  v-lazy-container="{ selector: 'img' }" class="img" v-for="(src, index) in imgs" :key="index">
				<img :data-src="src" :title="src" />
			</div>