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>

 

posted @ 2018-11-28 17:12  tianqi.zhao  阅读(920)  评论(0编辑  收藏  举报