cccicl
cccicl
发布于 1周前

使用pace.js在页面顶部添加加载进度条

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

下载pace.js

pace官网下载:http://github.hubspot.com/pace/docs/welcome/(包含主题介绍)
Github下载:https://github.com/HubSpot/pace
完整zip包:http://github.com/HubSpot/PACE/archive/v1.0.2.zip(包含了主题

要求

尽量把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
}

2、在pace.js的script标签上添加配置。

<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禁用。

其他配置项参考源码