vue-lazyload懒加载插件的使用

1.vue-lazyload在npm上面的网址https://www.npmjs.com/package/vue-lazyload

2.安装,在vue-cli中安装

npm install vue-lazyload -D

 3.在HTML中安装

<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
<script>
  Vue.use(VueLazyload)
  ...
</script> 

4.在vue-cli中的使用

在main.js中配置

import VueLazyload from 'vue-lazyload'

//使用懒加载组件
Vue.use(VueLazyload,{
  error: require('./assets/img/404nofind.jpg'),//当加载图片失败的时候
  loading: require('./assets/img/loading.png'),//当加载图片成功的时候
  preLoad:1
})

一些配置的参数

5.在需要的组件中使用

5.1v-lazy

<ul>
  <li v-for="(img,a) in list" :key=a>
    <img v-lazy="img.name" class="imgs">
  </li>
</ul>

  data(){
     return{
       list:[
         {name:require('../assets/imgs/01.jpg')},
         {name:require('../assets/imgs/02.jpg')},
         {name:require('../assets/imgs/03.jpg')},
         {name:require('../assets/imgs/04.jpg')},
         {name:require('../assets/imgs/05.jpg')},
         {name:require('../assets/imgs/06.jpg')},
         {name:require('../assets/imgs/07.jpg')},
         {name:require('../assets/imgs/08.jpg')},
         {name:require('../assets/imgs/09.jpg')},
         {name:require('../assets/imgs/010.jpg')},
       ]
     }
  },

 5.2v-lazy-container

<div v-lazy-container="{ selector: 'img',error: '../img/404nofind.3b1631e5.jpg', loading: 'loading.1b74fda3.png' }">
  <img data-src="../img/01.69e840f9.jpg" class="imgs">//data-src里面的地址是真实的地址,就是build之后在dist文件夹中的img里面的地址
  <img data-src="../img/02.34ef1dfb.jpg" class="imgs">
  <img data-src="../img/03.16b6bc13.jpg" class="imgs">  
    <img data-src="../img/04.cdbc3207.jpg" class="imgs">
  <img data-src="../img/05.a4e25273.jpg" class="imgs">
  <img data-src="../img/06.3183ae03.jpg" class="imgs">  
    <img data-src="../img/07.c0057596.jpg" class="imgs">
  <img data-src="../img/08.affc19be.jpg" class="imgs">
  <img data-src="../img/09.5c1d89c0.jpg" class="imgs">  
</div>

 

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值