vue 图片的懒加载

面试的时候一直被问懒加载，预加载的问题，回答的比较含糊。利用假期做了个vue 的懒加载，具体如下。
首先你的安装 npm install vue-lazyload --save-dev 或者yarn add vue-lazyload --save-dev
然后在main.js 里面引入
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,  //比列是1
  error: require('./assets/12.jpg'),  // 加载错误用的 图片
  loading: require('./assets/logo.png'),  //j加载时候用的图片
  attempt: 2    //一次加载2张
})
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

然后建立一个.vue的页面

效果图如下：

加载时候的样子

有点说明：这里的img标签中使用懒加载：v-lazy 代替 v-bind:src ；背景图片的用：v-lazy:background-image
然后加key 值。