图片懒加载 vue-lazyload

对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。
npm install vue-lazyload --save
import VueLazyLoad from 'vue-lazyload
Vue.use(VueLazyload)

<template>
  <div id="lazyload">
    <ul>
      <li
        v-for="item in imgList"
        :key="item.id">
        <!-- 图片懒加载必须设置图片的宽度 -->
        <img v-lazy="item.url" width="200">
        
        <div v-lazy:background-image="item.url" class="bg-img"></div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Lazyload',
  data () {
    return {
      imgList: []
    }
  },
  created () {
    for (let i = 1; i <= 10; i++) {
      this.imgList.push({
        url: require(`../assets/images/${i}.jpeg`),
        id: `pic_${i}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#lazyload {
  .bg-img {
    width: 400px;
    height: 250px;
    background-size: 100%;
  }
}
</style>