pace.js是一個(gè)自動(dòng)加載頁面進(jìn)度欄的小插件,它可以自動(dòng)監(jiān)視您的Ajax請(qǐng)求，事件循環(huán)滯后，文檔就緒狀態(tài)以及頁面上的元素來確定進(jìn)度。在ajax導(dǎo)航上，它也能進(jìn)行監(jiān)聽,同時(shí)他也可以很方便的集成到Wordpress中,例如:

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

官網(wǎng)地址: pace.js

下面來展示幾個(gè)pace提供的幾個(gè)例子,當(dāng)然我們也可以很方便的基于它去修改成更加定制化的加載進(jìn)度樣式.

由于官網(wǎng)文檔是用全英文寫的,所以我在接下的介紹中會(huì)盡量用自己的額語言來向大家介紹其使用過程.

1.配置介紹

Pace是全自動(dòng)的，無需進(jìn)行配置即可上手。

如果我們想進(jìn)行一些調(diào)整，請(qǐng)按以下步驟操作：

我們可以window.paceOptions在導(dǎo)入文件之前進(jìn)行設(shè)置：

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

  // 只在常規(guī)下和ajax導(dǎo)航下展示進(jìn)度條
  // not every request
  restartOnRequestAfter: false
}

您還可以在腳本標(biāo)簽上放置選項(xiàng)：

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

如果你使用的是AMD或Browserify，則可以將選項(xiàng)傳遞給start：

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

2.主題

Pace包含許多主題，可幫助我們?nèi)腴T。只要包括適當(dāng)?shù)腸ss文件。關(guān)于如何修改css樣式,我在這里給大家舉個(gè)例子,其實(shí)也很方便,如果我們下載了某個(gè)主題的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;
}

我們就可以直接修改它,包括進(jìn)度條的樣式,形狀等等.

3.收集器

收集器是收集進(jìn)度信息的代碼位。Pace包括四個(gè)默認(rèn)收集器：

ajax 監(jiān)視頁面上的所有ajax請(qǐng)求
element 檢查頁面上是否存在特定元素
Document 檢查文件readyState
Event Lag 檢查事件循環(huán)滯后信號(hào)，表明正在執(zhí)行javascript

可以通過相同名稱的配置選項(xiàng)分別配置或禁用它們。

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

添加自己的類paceOptions.extraSources以添加更多源。每個(gè)源都應(yīng)該具有一個(gè).progress屬性，或者.elements是具有.progress屬性的對(duì)象列表的屬性。Pace將自動(dòng)處理所有縮放，以使進(jìn)度更改對(duì)用戶而言看起來很平滑。

4.元素

呈現(xiàn)到屏幕上的元素是我們確定頁面呈現(xiàn)的一種方法。如果我們想使用該信息源（根本不需要），請(qǐng)指定一個(gè)或多個(gè)選擇器。我們可以使用逗號(hào)分隔選擇器，以正確處理錯(cuò)誤狀態(tài)（進(jìn)度條應(yīng)消失在錯(cuò)誤狀態(tài)），但我們尋找的元素可能永遠(yuǎn)不會(huì)出現(xiàn)：

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

當(dāng)每個(gè)選擇器匹配某項(xiàng)時(shí)，Pace都會(huì)認(rèn)為元素測(cè)試成功。對(duì)于此示例，當(dāng).timeline或.timeline-error存在時(shí)以及.user-profile 或.profile-error存在時(shí)。

5.重新啟動(dòng)規(guī)則

大多數(shù)用戶希望進(jìn)度欄在pushState事件發(fā)生時(shí)自動(dòng)重新啟動(dòng)（通常表示正在進(jìn)行ajax導(dǎo)航）。我們可以禁用此功能：

paceOptions = {
  restartOnPushState: false
}

我們還可以對(duì)持續(xù)時(shí)間超過x ms的每個(gè)ajax請(qǐng)求重新啟動(dòng)步速。如果我們發(fā)出用戶不需要知道的ajax請(qǐng)求（例如預(yù)緩存），則需要禁用此功能：

paceOptions = {
  restartOnRequestAfter: false
}

我們隨時(shí)可以通過以下方式手動(dòng)觸發(fā)重新啟動(dòng)

Pace.restart()

6.API

Pace公開以下方法：

Pace.start：顯示進(jìn)度條并開始更新。如果您不使用AMD或CommonJS，則會(huì)自動(dòng)調(diào)用。
Pace.restart：顯示進(jìn)度條（如果已隱藏），然后從頭開始報(bào)告進(jìn)度。每當(dāng)pushState或replaceState默認(rèn)情況下被自動(dòng)調(diào)用。
Pace.stop：隱藏進(jìn)度條并停止對(duì)其進(jìn)行更新。
Pace.track：明確跟蹤一個(gè)或多個(gè)請(qǐng)求，請(qǐng)參閱下面的跟蹤
Pace.ignore：明確忽略一個(gè)或多個(gè)請(qǐng)求，請(qǐng)參見下面的跟蹤

在網(wǎng)站中的應(yīng)用

這里舉個(gè)我自己使用的例子,比如我們?cè)谧约旱哪_手架中的ejs模板中導(dǎo)入:

<% 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>
<% } %>

然后我們?cè)僭陧?xiàng)目中引入自己的css,這樣我們就能安心的在我們的react/vue項(xiàng)目中使用了.

總結(jié)

到此這篇關(guān)于使用pace.js如何美化你的網(wǎng)站加載進(jìn)度條的文章就介紹到這了,更多相關(guān)pace.js美化網(wǎng)站加載進(jìn)度條內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: