图片懒加载就是初始时统一将img的src设置为一张默认图片,当图片加载完出来,才将真正的图片链接填入img的src属性。使用步骤如下:
1 安装插件
cnpm install vue-lazyload --save-dev
2 main.js引入
import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad,{
error:require('./statics/site/imgs/erro.jpg'),
loading:require('./statics/site/imgs/load.gif')
})
3 vue文件中将图片 :src="" 修改为 v-lazy=""
<img v-lazy="img"/>