使用 pace.js 实现网站自动加载进度条

前言

在进行网站体验优化时，发现了一个实用的工具：pace.js（加载进度条插件）。该插件经过 gzip 压缩后体积仅几 KB，功能简单且易于集成，特此分享并作为个人学习总结。

pace.js 介绍

pace.js 是一个自动显示页面加载进度条的轻量级插件。它能够自动监控 Ajax 请求、事件循环滞后、文档就绪状态以及页面上的特定元素来计算进度。此外，它还支持 Ajax 导航监听，并可方便地集成到 WordPress 等系统中。

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

官网地址: pace.js

下面展示几个 pace 提供的示例，当然我们也可以基于它修改出更定制化的加载进度样式。

由于官网文档为全英文，接下来的介绍将尽量使用通俗语言说明其使用过程。

1.配置介绍

Pace 默认全自动运行，无需任何配置即可直接使用。

若需进行个性化调整，请遵循以下步骤：

在导入脚本文件之前，可以通过设置 window.paceOptions 来配置参数：

paceOptions = {
  // 禁用元素源
  elements: false,

  // 只在常规下和ajax导航下展示进度条
  // 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
  });
});

2.主题

Pace 内置了多种主题，只需引入对应的 CSS 文件即可使用。关于如何修改 CSS 样式，这里举一个例子：如果我们下载了某个主题的 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: #29d;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
}

我们可以直接修改该文件，包括进度条的样式、形状等细节。

3.收集器

收集器是用于获取进度信息的代码模块。Pace 默认包含四个收集器：

• ajax：监视页面上所有的 Ajax 请求
• element：检查页面上是否存在特定的 DOM 元素
• Document：检查文档的 readyState 状态
• Event Lag：检查事件循环滞后信号，以此判断 JavaScript 是否正在执行

可以通过同名配置选项分别配置或禁用这些收集器。

paceOptions = {
  ajax: false, // disabled
  document: false, // disabled
  eventLag: false, // disabled
  elements: {
    selectors: ['.my-page']
  }
};

若需添加自定义源，可在 paceOptions.extraSources 中添加。每个源应包含一个 .progress 属性，或是一个具有 .progress 属性对象列表的 .elements 属性。Pace 会自动处理所有缩放，使进度变化对用户而言平滑自然。

4.元素

渲染到屏幕上的元素是判断页面呈现状态的一种方式。如果希望使用此信息源（非必需），可以指定一个或多个 CSS 选择器。我们可以使用逗号分隔选择器，以正确处理错误状态（即当寻找的元素从未出现时，进度条应消失）：

paceOptions = {
  elements: {
    selectors: ['.timeline,.timeline-error', '.user-profile,.profile-error']
  }
}

当每个选择器匹配到对应项时，Pace 即认为元素测试成功。例如，当 .timeline 或 .timeline-error 存在，以及 .user-profile 或 .profile-error 存在时。

5.重新启动规则

大多数用户希望进度条在 pushState 事件发生时自动重启（通常表示正在进行 Ajax 导航）。我们可以禁用此功能：

paceOptions = {
  restartOnPushState: false
}

我们还可以对持续时间超过 x 毫秒的每个 Ajax 请求重启进度条。如果发出用户无需知晓的 Ajax 请求（例如预缓存），则需要禁用此功能：

paceOptions = {
  restartOnRequestAfter: false
}

我们随时可以通过以下方式手动触发重启：

Pace.restart()

6.API

Pace 公开以下方法：

• Pace.start：显示进度条并开始更新。如果不使用 AMD 或 CommonJS，该方法会自动调用。
• Pace.restart：如果进度条已隐藏，则显示它并从头开始报告进度。每当 pushState 或 replaceState 默认自动调用时触发。
• Pace.stop：隐藏进度条并停止更新。
• Pace.track：明确跟踪一个或多个请求，详见下方的跟踪说明。
• Pace.ignore：明确忽略一个或多个请求，详见下方的跟踪说明。

在网站中的应用

这里举一个实际使用的例子，例如在脚手架中的 ejs 模板中导入：

<% if(context.env === 'production') { %>
    <script src="<%= context.config.publicPath %>pace.min.js"></script>
<% } else {%>
    <script src="https://cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<% } %>

然后在项目中引入自定义的 CSS，即可在 React 或 Vue 项目中安心使用。

总结

到此这篇关于使用 pace.js 美化网站加载进度条的文章就介绍到这了，更多相关 pace.js 美化网站加载进度条内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！