1. Pace.js

pace是一个页面自动加载进度的js插件,而且使用特别方便。

主页地址:PACE

Github地址:PACE

官方也提供了很多加载样式,都很不错,例如:

更多主题可以在这里看:pace/docs

并且提供wordpress插件:PACE WordPress插件

2. 使用

2.1 基本用法

只需要引入一个pace.js文件和一个主题文件,就自动集成了该功能,在加载页面时会有主题对应的效果。


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

2.2 配置

设置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>
<pre>

详细的配置可以查看具体的主页文档。