页面加载进度条pace.js

Pace.js是一个非常有意思的js插件,可以自动的监听页面的加载数据,并且能够定制加载条。最重要的一点,它还可以监测到ajax的调用并且出现加载条提示。它还可以引入加载进度条的主题样式,你可以选择任意颜色和多种动画效果(例如简约、闪光灯,MAC OSX,左侧填充,顶部填充,计数器和弹跳等等动画效果)。

1、引入插件相关的Pace.js和Pace.css
[cc lang="html" escaped="true"]<script src="/pace/pace.js"></script>
<link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" />[/cc]
这样基本的就可以了。当然也支持自定义

2、Pace.js配置,监听的元素:Ajax、Elements、Document、Event Lag
在引入之前,写下一下文件,
[cc lang="javascript" escaped="true"]paceOptions = {
ajax: false, // disabled
document: false, // disabled
eventLag: false, // disabled
elements: {
selectors: ['.my-page']
}
restartOnRequestAfter: false }[/cc]
或者直接在标签里面定义属性
[cc lang="javascript" escaped="true"]<script data-pace-options='{ "ajax": false }' src='pace.js'></script>[/cc]

pace.js官网:http://github.hubspot.com/pace/
附:css3动画库animate.css介绍和使用

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值