《前端實戰總結》之使用pace.js爲你的網站添加加載進度條

時間 2019-11-16

標籤前端實戰總結使用 pace.js pace 爲你網站添加加載進度欄目 JavaScript 简体版

原文原文鏈接

前言

最近作網站體驗優化的時候忽然發現一個好東西，pace.js(加載進度條插件)，gzip以後只有幾kb，簡單好用，特意分享出來，也做爲本身的一個學習總結。javascript

pace.js介紹

pace.js是一個自動加載頁面進度欄的小插件,它能夠自動監視您的Ajax請求，事件循環滯後，文檔就緒狀態以及頁面上的元素來肯定進度。在ajax導航上，它也能進行監聽,同時他也能夠很方便的集成到Wordpress中,例如:css

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

官網地址: pace.jshtml

下面來展現幾個pace提供的幾個例子,固然咱們也能夠很方便的基於它去修改爲更加定製化的加載進度樣式.前端

因爲官網文檔是用全英文寫的,因此我在接下的介紹中會盡可能用本身的額語言來向你們介紹其使用過程.vue

1.配置介紹

Pace是全自動的，無需進行配置便可上手。java

若是咱們想進行一些調整，請按如下步驟操做：node

咱們能夠window.paceOptions在導入文件以前進行設置：react

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

  // 只在常規下和ajax導航下展現進度條
  // not every request
  restartOnRequestAfter: false
}
複製代碼

您還能夠在腳本標籤上放置選項：webpack

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

若是你使用的是AMD或Browserify，則能夠將選項傳遞給start：css3

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等前端知識和實戰，歡迎在公衆號《趣談前端》加入咱們一塊兒學習討論，共同探索前端的邊界。