使用vue-lazyload实现图片懒加载

首先安装依赖cnpm install vue-lazyload --save
然后再main.js中引入

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',  // 默认加载的图片
  attempt: 1
})

加载图片时使用

<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  </li>
</ul>

注意，我这里开始图片显示不出来，仔细对比了一下代码发现这里跟动态绑定v-bind:src不一样，直接v-lazy="src"就可以了。
npm官网中搜索vue-lazyload还有更多的用法，可以帮助我们学习。