pace.min.js监听ajax,使用pace.js在页面顶部添加加载进度条

很多网站(如Github,Stackoverflow)在加载页面时，页面的顶部会看到页面加载进度条。使用pace.js可以很简单的实现此功能。

下载pace.js

要求

尽量把pace.js以及主题的css文件放在页面head标签的前面，这是因为pace.js会监控页面的元素，异步请求等，我们需要提早加载pace。

最少代码使用

使用pace只需要在页面添加pace.js和相应的进度条样式的css:

我们是要在顶部添加类似边界线的进度条，使用的是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

}

2、在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禁用。

其他配置项参考源码