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>