vue懒加载插件

（1） 安装：

npm i vue-lazyload -S

（2）代码：

<template>
  <div class="Lazy">
    <ul>
      <li v-for="(item,index) in todoList"
          :key="index">
        <img class="item-pic"
             v-lazy="item.src" />
      </li>
    </ul>
  </div>
</template>
<script>
import Vue from 'vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'http://img3.imgtn.bdimg.com/it/u=3133706957,941174044&fm=26&gp=0.jpg',
  loading: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557825530563&di=6c1a1404f46c3fe9ff799473c57dab7f&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F038ac3055e6a32c6ac7251df85689e4.jpg',
  attempt: 1,
  listenEvents: ['scroll']
})
export default {
  name: 'Lazy',
  data () {
    return {
      todoList: [
        {
          src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557825771356&di=54b62c05fcf515eb7397d591b70a2565&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Fb7fd5266d0160924512075c8d60735fae7cd34d8.jpg'
        }, {
          src: 'http://img3.imgtn.bdimg.com/it/u=3133706957,941174044&fm=26&gp=0.jpg'
        }, {
          src: 'http://img3.imgtn.bdimg.com/it/u=3060052099,2668455390&fm=26&gp=0.jpg'
        }, {
          src: 'http://img5.imgtn.bdimg.com/it/u=2016363011,101787864&fm=26&gp=0.jpg'
        }, {
          src: 'http://img0.imgtn.bdimg.com/it/u=1936286817,598539981&fm=26&gp=0.jpg'
        }, {
          src: 'http://img0.imgtn.bdimg.com/it/u=1711083898,1110899366&fm=26&gp=0.jpg'
        }, {
          src: 'http://img0.imgtn.bdimg.com/it/u=2047572761,3993497429&fm=26&gp=0.jpg'
        }, {
          src: 'http://img1.imgtn.bdimg.com/it/u=2013365486,2678974389&fm=26&gp=0.jpg'
        }, {
          src: 'http://img3.imgtn.bdimg.com/it/u=3133706957,941174044&fm=26&gp=0.jpg'
        }, {
          src: 'http://img3.imgtn.bdimg.com/it/u=3060052099,2668455390&fm=26&gp=0.jpg'
        }, {
          src: 'http://img5.imgtn.bdimg.com/it/u=2016363011,101787864&fm=26&gp=0.jpg'
        }, {
          src: 'http://img0.imgtn.bdimg.com/it/u=1936286817,598539981&fm=26&gp=0.jpg'
        }, {
          src: 'http://img0.imgtn.bdimg.com/it/u=1711083898,1110899366&fm=26&gp=0.jpg'
        }, {
          src: 'http://img0.imgtn.bdimg.com/it/u=2047572761,3993497429&fm=26&gp=0.jpg'
        }
      ]
    }
  }
}
</script>
<style lang="less">
.Lazy {
  background-color: #eee;
  .item-pic {
    width: 100%;
  }
}
</style>

效果的话，自运行代码实验。

github地址： https://github.com/hilongjw/vue-lazyload