Vue图片懒加载的使用 vue-lazyload

图片太多，在一些内存较低的应用中使用，会卡顿，甚至崩溃，此时，添加个图片懒加载，解决问题

操作步骤：
下载vue-lazyload包 npm 或yarn都可以

 npm install vue-lazyload --save-dev

在vue 中main.js全局引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: '//请求失败图片.png', //这个是请求失败后显示的图片
  loading: '//加载时默认显示图片.png' //这个是加载的loading过渡效果
})
...
new Vue({
  router,
  store,
  render: (h) => h(App)
}).$mount('#app')

页面中：使用v-lazy 替换:src

// 单张图
<img v-lazy="image" :onerror="defaultImage" width="100%" class="image" />

// 多张图
<div v-lazy-container="{ selector: 'img' }">
  <img data-src="https://domo.com/1.png">
  <img data-src="//https://domo.com/2.png">
  <img data-src="//https://domo.com/3.png">
  <img data-src="//https://domo.com/...png">   
</div>

就可以正确使用了

官网地址：
https://www.npmjs.com/package/vue-lazyload