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>