vue-lazyload基础实例(基于vue2.0和vue-router2.0)

首先引入依赖

import Vue from 'vue';
import Router from 'vue-router';
import VueLazyload from 'vue-lazyload';

配置vue-lazyload

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: './img/error.jpg',
  loading: 'http://cdn.uehtml.com/201402/1392662591495_1140x0.gif',
  attempt: 1,
  listenEvents: [ 'scroll', 'mousewheel' ]
});

模版部分

<div class="hello">
  <ul>
    <li v-for="item in imgUrl">
      <img v-lazy="item.src" alt="" width="300" height="150"/>
    </li>
  </ul>
</div>
export default {
  name: 'hello',
  data() {
    return {
      imgUrl: [
        {src: 'http://pic.58pic.com/58pic/11/25/25/46j58PICKMh.jpg'},
        {src: 'http://pic.58pic.com/58pic/11/25/25/46j58PICKMh.jpg'},
        {src: 'http://pic.58pic.com/58pic/11/25/25/46j58PICKMh.jpg'},
        {src: 'http://pic.58pic.com/58pic/11/25/25/46j58PICKMh.jpg'}
      ]
    };
  }
};

css

img[lazy=loading]{
    //your code
}
img[lazy=loaded]{
    //your code
  animation:fade 0.5s;
}
@keyframes fade {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

项目完整实例地址:https://github.com/hua1995116/vue/tree/master/vue-lazyload
lazy-load api 地址https://www.npmjs.com/package/vue-lazyload

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值