如何使用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 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项目中使用了.
总结
到此这篇关于使用pace.js如何美化你的网站加载进度条的文章就介绍到这了,更多相关pace.js美化网站加载进度条内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！
原文出处：https://mp.weixin.qq.com/s/cBoQYk84nfxJ5Y7etYBCUw
相关文章
用js的document.write输出的广告无阻塞加载的方法
一、广告代码分析很多第三方的广告系统都是使用document.write来加载广告，如下面的一个javascript的广告链接。复制代码 代码如下:<script type="text/javascript" src="http://gg.5173.com/adpolestar/5173/;ap=2EBE5...2014-06-07- 这篇文章主要介绍了解决echarts 一条柱状图显示两个值,类似进度条的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-20
- 当页面打开时我们需要执行一些操作,这个时候如果我们选择使用jquery的话,需要重写他的3中方法,自我感觉没什么区 别,看个人喜好了,第二种感觉比较简单明了: 第一种: 复制代码 代码如下: <script type="text/javas...2014-06-07
- 这篇文章主要介绍了解决IDEA插件市场Plugins无法加载的问题,本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-10-21
- 本文实例讲述了jQuery实现文件上传进度条效果的代码。分享给大家供大家参考。具体如下： 运行效果截图如下：具体代码如下：<!DOCTYPE html><html><head><meta charset="utf-8"><title>upload</title><link rel="stylesheet...2015-11-24
- 如果我们要在Android应用APP中加载html5页面，我们可以使用WebView，本文我们分享两个WebView加载html5页面实例应用。 实例一：WebView加载html5实现炫酷引导页面大多...2016-09-20
ant design中upload组件上传大文件,显示进度条进度的实例
这篇文章主要介绍了ant design中upload组件上传大文件,显示进度条进度的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29- 本文实例讲述了jquery实现模拟百分比进度条渐变效果代码。分享给大家供大家参考，具体如下：这里为了便于看到加载百分比，对代码进行了处理，实际使用时并不需要这样。运行效果截图如下：在线演示地址如下：http://demo.jb51.net...2015-10-30
- 距离 Vue 3.0 正式版发布已经有一段时间了,关于vue3组件库相关的问题还是挺多人感兴趣的,这篇文章主要给大家介绍了关于vue3如何按需加载第三方组件库的相关资料,需要的朋友可以参考下...2021-06-02
- AngularJS 通过路由支持多视图应用， 可以根据路由动态加载所需的视图， 在 AngularJS 的文档中有详细的介绍， 网上也有不少教程， 就不用介绍了！随着视图的不断增加，js文件会越来越多，而 AngularJS 默认需要把全部的js都一次性...2015-10-21
- 这篇文章主要介绍了Angular性能优化之第三方组件和懒加载技术，对性能优化感兴趣的同学，可以参考下...2021-05-11
解决vue动态路由异步加载import组件,加载不到module的问题
这篇文章主要介绍了解决vue动态路由异步加载import组件,加载不到module的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27- 本文介绍了如何延迟javascript代码的加载，加快网页的访问速度。 当一个网站有很多js代码要加载，js代码放置的位置在一定程度上将会影像网页的加载速度，为了让我们的网页加载速度更快，本文总结了一下几个注意点...2013-10-13
- 本篇文章主要介绍了ThinkPHP+jquery实现“加载更多”功能代码，以实例代码讲诉了加载更多的代码实现,非常具有实用价值,需要的朋友可以参考下 ...2017-03-13
- 这篇文章主要介绍了C#实现带进度条的ListView 的相关资料,需要的朋友可以参考下...2020-06-25
- 本篇文章主要介绍了nodejs 终端打印进度条实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 ...2017-04-27
- 在网页中，经常见到进度条效果，那么这些个性的进度条组件效果是怎么实现的呢，下面脚本之家小编给大家分享Bootstrap进度条组件知识详解，感兴趣的朋友要求学习吧...2016-05-04
- APC模块，它的全称是Alternative PHP Cache。APC可以将所有PHP代码会被缓存起来， 另外它可提供一定的内存缓存功能.但是这个功能并不是十分完美,有报告说如果频繁使用APC缓存的写入功能,会导致不可预料的错误.如果想使用...2015-10-30
- php不具备实时上传进度条功能，如果想有这种功能我们一般会使用ajax来实现，但是php提供了一个apc，它就可以与php配置实现上传进度条功能。 主要针对的是window上的应用。 1.服务器要支持apc扩展，没有此扩展的话，下载一个扩...2015-10-30
- 下面小编就为大家带来一篇用C++面向对象的方式动态加载so的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2020-04-25