步骤
1.安装插件
cnpm install vue-lazyload --save
或者npm install vue-lazyload --save-dev
2.在mian.js中引入插件
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
loading: loadingImg,
})
3.使用
import VueLazyload from 'vue-lazyload' //插件
import loadingImg from './assets/loading.gif' //预先加载的图片
Vue.use(VueLazyload, {
loading: loadingImg, //使用图片
})
4.把项目中的 :src改成v-lazy
没使用的时候修改前:
<div class="map" v-for="(v,i) in DataBase" :key="i" >
<img :src="v.img" alt="" />
<img :src="v.xianlu" alt="" />
</div>
使用懒加载方式的修改后:
<div class="map" v-for="(v,i) in DataBase" :key="i" >
<img v-lazy="v.img" alt="" />
<img v-lazy="v.xianlu" alt="" />
</div>