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 {
display: 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 = {
// disable the 'elements' source
elements: false,
// Only show the progress on regular and ajax-y page navigation,
// not every request
restartOnRequestAfter: false
}
<script data-pace-options='{ "ajax": false }' src='pace.js'></script>
3、如果是使用AMD或browserify，在pace的start函数里添加配置
define(['pace'], function(pace){
pace.start({
document: false
});
});
配置项
paceOptions = {
ajax: false, // disabled
document: false, // disabled
eventLag: false, // disabled
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/
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。