vue-lazyLoad 图片懒加载

  $ npm install vue-lazyLoader

  之后在main中引入    import VueLazyload from 'vue-lazyload'

  给定一张默认图片：

Vue.use(VueLazyload, {
　　error: 'dist/error.png'
   loading: require('common/image/default.png')
})

 引申： 如果不同的地方需要不同的默认图片该怎么做？

 希望有机会来填坑

——————————————————————————

当日填坑，查阅了官方文档后

参数选项说明中文版： https://segmentfault.com/a/1190000011672452

  如果在不同的地方需要不同的默认图片，可以用如下的方法： 

<div v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }">
  <img data-src="//domain.com/img1.jpg">
  <img data-src="//domain.com/img2.jpg">
  <img data-src="//domain.com/img3.jpg">  
</div>

   或者

<div v-lazy-container="{ selector: 'img' }">
  <img data-src="//domain.com/img1.jpg" data-error="xxx.jpg">
  <img data-src="//domain.com/img2.jpg" data-loading="xxx.jpg">
  <img data-src="//domain.com/img3.jpg">  
</div>

 

  另外找到了一种方法可以控制图片加载中、加载结束、或者加载错误三种状态的方法

<img src="imgUrl" lazy="loading">
<img src="imgUrl" lazy="loaded">
<img src="imgUrl" lazy="error">

<style>
  img[lazy=loading] {
    /*your style here*/
  }
  img[lazy=error] {
    /*your style here*/
  }
  img[lazy=loaded] {
    /*your style here*/
  }
  /*
  or background-image
  */
  .yourclass[lazy=loading] {
    /*your style here*/
  }
  .yourclass[lazy=error] {
    /*your style here*/
  }
  .yourclass[lazy=loaded] {
    /*your style here*/
  }
</style>