《前端实战总结》之使用pace.js为你的网站添加加载进度条

徐小夕 等级 770 0 0

《前端实战总结》之使用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="stylesheet" />
</head>

官网地址: pace.js

下面来展示几个pace提供的几个例子,当然我们也可以很方便的基于它去修改成更加定制化的加载进度样式.

《前端实战总结》之使用pace.js为你的网站添加加载进度条

《前端实战总结》之使用pace.js为你的网站添加加载进度条

《前端实战总结》之使用pace.js为你的网站添加加载进度条

《前端实战总结》之使用pace.js为你的网站添加加载进度条

《前端实战总结》之使用pace.js为你的网站添加加载进度条

《前端实战总结》之使用pace.js为你的网站添加加载进度条

由于官网文档是用全英文写的,所以我在接下的介绍中会尽量用自己的额语言来向大家介绍其使用过程.

1.配置介绍

Pace是全自动的,无需进行配置即可上手。

如果我们想进行一些调整,请按以下步骤操作:

我们可以window.paceOptions在导入文件之前进行设置:

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

  // 只在常规下和ajax导航下展示进度条
  // not every request
  restartOnRequestAfter: false
}

您还可以在脚本标签上放置选项:

<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 检查页面上是否存在特定元素
  • Document 检查文件readyState
  • Event Lag 检查事件循环滞后信号,表明正在执行javascript

可以通过相同名称的配置选项分别配置或禁用它们。

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

添加自己的类paceOptions.extraSources以添加更多源。每个源都应该具有一个.progress属性,或者.elements是具有.progress属性的对象列表的 属性。Pace将自动处理所有缩放,以使进度更改对用户而言看起来很平滑。

4.元素

呈现到屏幕上的元素是我们确定页面呈现的一种方法。如果我们想使用该信息源(根本不需要),请指定一个或多个选择器。我们可以使用逗号分隔选择器,以正确处理错误状态(进度条应消失在错误状态),但我们寻找的元素可能永远不会出现:

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 ms的每个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项目中使用了.

最后

如果想了解更多webpack,node,gulp,css3,javascript,nodeJS,canvas等前端知识和实战,欢迎在公众号《趣谈前端》加入我们一起学习讨论,共同探索前端的边界。

《前端实战总结》之使用pace.js为你的网站添加加载进度条

更多推荐

收藏
评论区

相关推荐

教你用200行代码写一个爱豆拼拼乐H5小游戏(附源码)
前言 本文将带大家一步步实现一个H5拼图小游戏,考虑到H5游戏的轻量级和代码体积,我没有使用react或vue这些框架,而采用我自己写的dom库和原生javascript来实现业务功能,具体库代码可见我的文章如何用不到200行代码写一款属于自己的js类库(https://juejin.im/post/6844903880707293198),构建工具我采
《前端实战总结》之使用pace.js为你的网站添加加载进度条
前言 最近做网站体验优化的时候突然发现一个好东西,pace.js(加载进度条插件),gzip之后只有几kb, 简单好用,特地分享出来,也作为自己的一个学习总结。
《前端实战总结》之使用解释器模式实现获取元素Xpath路径的算法
前端领域里基于javascript的设计模式和算法有很多,在很多复杂应用中也扮演着很重要的角色,接下来就介绍一下javascript设计模式中的解释器模式,并用它来实现一个获取元素Xpath路径的算法。 上期回顾 《前端实战总结》之迭代器模式的N1种应用场景(https://juejin.im/post/6844904008616771591)
GET和POST两种基本请求方法的区别
GET和POST是HTTP请求的两种基本方法,要说它们的区别,接触过WEB开发的人都能说出一二。 最直观的区别就是GET把参数包含在URL中,POST通过request body传递参数。 你可能自己写过无数个GET和POST请求,或者已经看过很多权威网站总结出的他们的区别,你非常清楚知道什么时候该用什么。 当你在面试中被问到这个问题,你的内心充满了自
Java乱码
1.Javascript传参乱码: 在浏览器端对要传递的中文参数进行编码处理.代码如下: xmlhttp.open("POST",url,true); //请求参数初始化 xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //因为请求方式为PO
20155211 网络攻防技术 Exp08 Web基础
20155211 网络攻防技术 Exp08 Web基础 =========================== 实践内容 ---- 1. Web前端HTML,能正常安装、启停Apache。理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的HTML。 2. Web前端javascipt,理解JavaScript的基本功能,理解DOM。
20155211 网络攻防技术 Exp08 Web基础
20155211 网络攻防技术 Exp08 Web基础 =========================== 实践内容 ---- 1. Web前端HTML,能正常安装、启停Apache。理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的HTML。 2. Web前端javascipt,理解JavaScript的基本功能,理解DOM。
Chrome 上开发调试的九个真香技巧
![](https://oscimg.oschina.net/oscnet/d066b4ca-c089-4384-b0a9-5b13b96d77b3.png) 作者:Jimmy,链接:https://juejin.im/post/6881439870380834830 如果你是一个前端开发者,你接触浏览器的时间会占用你工作时间的一半,甚至更多。那么我们推
Curl之Post Json
curl Post Json $ curl -i -X POST -H "'Content-type':'application/x-www-form-urlencoded', 'charset':'utf-8', 'Accept': 'text/plain'" -d 'json_data={"a":"aaa","b":"bbb","data
HttpURLConnection(http 1.1) 用法、状态码、状态描述
最近研究了java的HttpURLConnection的用法, 这里简单的做一下记录: Java中可以使用HttpURLConnection来请求WEB资源。 **1、 URL请求的类别** 分为二类,GET与POST请求。二者的区别在于:       a:) get请求可以获取静态页面,也可以把参数放在URL字串后面,传递给servlet,
JavaScript 内存详解 & 分析指南
![](https://oscimg.oschina.net/oscnet/74587263-715c-49e9-abc1-c4a7d37b2cef.gif "引导关注") 前言 == JavaScript 诞生于 1995 年,最初被设计用于网页内的表单验证。 这些年来 JavaScript 成长飞速,生态圈日益壮大,成为了最受程序员欢迎的开发语言之
JavaScript 执行效率不行?因为你还没用 V8
作为**当下使用最广泛的 JavaScript 引擎**,V8 的生态圈非常庞大,这与它革命性的设计密不可分。 V8 出现之前,所有 JavaScript 引擎用的都是解释执行的方式,这是 JS 执行速度过慢的主要原因;而 V8 引入的即时编译(JIT)双轮驱动设计,混合编译执行和解释执行两种手段,**为 JavaScript 的执行速度带来了极大
Javascript开发人员偏爱Deno而不是Node的5大原因
![](https://oscimg.oschina.net/oscnet/2f078ca0f30b400261bf865253aa28f0a40.jpg) NodeJS的作者Ryan Dahl发布了一个新的运行时,旨在解决Node的许多缺点。你最初的反应可能是“哦,太棒了,另一个Javascript框架?正是我所需
Springmvc异步上传文件
<script src="js/jquery.js" type="text/javascript"></script><script src="js/jquery.ext.js" type="text/javascript"></script><script src="js/jquery.form.js" type="text/javascript"
TCP、UDP、HTTP、HTTPS之前的区别
网络由下往上分为: 物理层--- 数据链路层--- 网络层 --  IP协议 传输层 --  TCP协议 会话层 -- 表示层和应用层 --  HTTP协议 ![](https://oscimg.oschina.net/oscnet/aeb8a94598094caf8c377e1277ba95948ea.png) 1、TCP/IP连接 TC