pace.js页面加载进度条插件使用指南

pace.js插件简介与特性

本文简要介绍pace.js插件。

在页面中引入Pace.js后，该插件会自动监测页面请求（涵盖Ajax请求）。当遇到事件循环滞后时，它会在页面上记录加载状态及进度。此插件具备优秀的兼容性，支持IE8及以上版本的所有主流浏览器。其亮点在于支持引入加载进度条的主题样式，用户可自由选择任意颜色及多种动画效果（如简约、闪光灯、MAC OSX、左侧填充、顶部填充、计数器和弹跳等）。若具备CSS动画修改能力，还可实现无限可能的动画效果，为网站增添个性化特色。

引入与配置方法

调用方法如下：

只需引入Pace.js脚本及对应的主题文件即可生效。

<head>
 <script src="/pace/pace.js"></script>
 <link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" />
</head>

关于自定义配置：

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标签内，示例如下：

<script data-pace-options='{ "ajax": false }' src='pace.js'></script>

若使用AMD或Browserify加载模块，可通过以下方式设置（例如start）：

define(['pace'], function(pace){
 pace.start({
  document: false
 });
});

API接口使用说明

使用API接口：

Pace.js公开的API列表如下：

Pace.start：开始显示进度条。若未使用AMD或Browserify加载模块，此方法将默认执行。

Pace.restart：使进度条重新加载并显示。

Pace.stop：隐藏进度条并停止加载过程。

Pace.track：监测一个或多个请求任务。

Pace.ignore：忽略一个或多个请求任务。

以上为基本使用方法，其他方法的使用详情可前往官网查阅更详细的介绍。希望该插件能对大家有所帮助。