vue图片懒加载（Vue-Lazyload）使用

1. 首先在npm上下载vue-lazyload的包

$ npm install vue-lazyload --save

2. 在main.js里面import这个包

import VueLazyload from 'vue-lazyload'

// 设置参数
Vue.use(VueLazyload, {  
  preLoad: 1.3,   //预加载的宽高比
  error: 'dist/error.png',  //图片加载失败时使用的图片源
  loading: 'dist/loading.gif',  //图片加载的路径
  attempt: 1  //尝试加载次数
})

具体配置参数见 https://www.npmjs.com/package/vue-lazyload

注：图片位置不同，引入方法不同，具体如下：

• 占位图（error，loading对应的图片）如果在static文件夹内可以直接引入路径；

• 如果再assets文件夹内的话需要以require(‘img.src’)的方式引入图片，否则会导致webpack在打包时候无法正确解析图片；

例如：

Vue.use(VueLazyLoad, {
  loading: require('./assets/img/loading.gif'),
  error: require('./assets/img/error.jpg')
})

3. 在组件中使用，如下：

<ul>
  <li v-for="img in imgs">
    <img v-lazy="img" >
  </li>
</ul>

更多用法见 https://www.npmjs.com/package/vue-lazyload