pace.js 介绍
Pace.js是 一个 非常有意思的js 插件 ，可以 自动 的监听 页面 的加载数据，并且能够定制加载条。最重要的一点，它还可以监测到ajax的 调用 并且出现加载条 提示 。它还可以引入加载进度条的 主题 样式，你可以选择任意颜色和多种动画 效果 （例如简约、闪光灯，MAC OSX，左侧填充，顶部填充，计数器和弹跳等等动画 效果 ）。
尽量把pace.js以及 主题 的css 文件 放在 页面 head 标签 的前面，这是因为pace.js会监控 页面 的元素，异步请求等，我们需要提早加载pace。
最少 代码 使用
使用pace只需要在 页面 添加 pace.js和相应的进度条样式的css:
<head>
<script?src="/pace/pace.js"></script>
<link?href="/pace/themes/pace-theme-minimal.css"?rel="stylesheet"?/>
</head>
我们是要在顶部 添加 类似边界线的进度条，使用的是minimal 主题 。
pace-theme-minimal.css全部 代码 如下：
.pace?{
?-webkit-pointer-events:?none;
?pointer-events:?none;
?-webkit-user-select:?none;
?-moz-user-select:?none;
?user-select:?none;
}
.pace-inactive?{
? dis play:?none;
}
.pace?.pace-progress?{
?background:?#2299dd;
?position:?fixed;
?z-index:?2000;
?top:?0;
?right:?100%;
?width:?100%;
?height:?2px;
}
把.pace?.pace-progress的background改为你自己的颜色即可。pace-theme-minimal.css的 代码 很少，建议吧这段 代码 添加 到 页面 的style里。
至此，pace不需要任何配置就启动了。
配置
pace是可以完全 自动 启动，但它也提供了一些配置项给我们定制一些 功能 。
添加 配置方式
1、在引入pace.js 文件 前 添加 window.paceOptions配置
paceOptions?=?{
//? dis able?the?'elements'?source
elements:?false,
//?Only?show?the?progress?on?regular?and?ajax-y?page?navigation,
//?not?every?request
restartOnRequestAfter:?false
}
2、在pace.js的script 标签 上 添加 配置。
<script?data-pace-options='{?"ajax":?false?}'?src='pace.js'></script>
3、如果是使用AMD或 bro wserify，在pace的start 函数 里 添加 配置
define(['pace'],?function(pace){
pace.start({
document:?false
});
});
配置项
paceOptions?=?{
ajax:?false,?//? dis abled
document:?false,?//? dis abled
eventLag:?false,?//? dis abled
elements:?{
selectors:?['.my-page']
},
restartOnPushState:?false
};
ajax：boolean，是否监控 页面 的 ajax请求， 默 认为true。
document：boolean，是否监控document的readyState， 默 认为true
eventLag：boolean，是否监控事件的滞后
elements：对象， 添加 监控的元素，使用selectors指定。 默 认为body
restartOnPushState：boolean，监控pushState事件， 默 认发生pushState事件后会重新加载进度条，false禁用。
网站地址 : http://github.hubspot.com/pace/docs/welcome/
GitHub: https://github.com/HubSpot/pace
网站描述: 网页 自动 加载进度条 插件
pace.js官方网站
官方网站： http://github.hubspot.com/pace/docs/welcome/
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。