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的页面

<template>
  <div id="lazyload">
        <!-- img中使用图片懒加载。 v-lazy代替v-bind:src -->
        <!-- <ul class="img">
            <li v-for="(item) in imgList" :key="item">
                <img v-lazy="item" alt="" style="width: 768px;">
            </li>
        </ul> -->
        <!-- 背景图中使用图片懒加载。 v-lazy:background-image = "" -->
        <ul class="bgImg">
            <li v-for="(item) in imgList" v-lazy:background-image="item" :key="item"></li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return{
            imgList:[
                require('../assets/timg.jpg'),
                require('../assets/timg.jpg'),
                require('../assets/timg.jpg'),
                require('../assets/timg.jpg'),
                require('../assets/timg.jpg'),
                require('../assets/timg.jpg'),
                require('../assets/timg.jpg'),
                require('../assets/timg.jpg'),
                require('../assets/timg.jpg'),
                require('../assets/timg.jpg'),
                require('../assets/timg.jpg'),
                require('../assets/timg.jpg'),
                require('../assets/timg.jpg'),
                require('../assets/timg.jpg'),
                require('../assets/timg.jpg'),
                require('../assets/timg.jpg'),
                require('../assets/timg.jpg'),
            ],
        }
    }
}
</script>
<style lang="less" scoped>
 #lazyload{
        width: 768px;
        background-color: #fcc;
        margin: 0 auto;
        .img{
            width: 768px;
            background-color: #fcc;
        }
        .bgImg{
            li{
                width: 768px;
                height: 522px;  
                margin-bottom: 10px;
                background-repeat: no-repeat;    
                background-size: cover;
            }
        }
    }
</style>

效果图如下：

加载时候的样子

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