Pace.jsは、ウェブページの読み込み状態を示すための進捗バーを提供するJavaScriptライブラリです。このライブラリは自動的にAJAXリクエスト、イベントループの遅延、ドキュメントの読み込み状態、およびページ上の要素を監視します。
インクルード方法
Pace.jsとテーマCSSをページに含めます。
<head>
<script src="/path/to/pace.js"></script>
<link href="/path/to/your-theme.css" rel="stylesheet" />
</head>
設定
Pace.jsはデフォルトで自動的に動作しますが、カスタマイズが必要な場合は以下のオプションを使用できます。
JavaScriptでの設定
window.paceOptions = {
elements: false,
restartOnRequestAfter: false
};
スクリプトタグでの設定
<script data-pace-options='{ "ajax": false }' src='pace.js'></script>
AMDまたはBrowserifyを使用する場合
define(['pace'], function(pace){
pace.start({
document: false
});
});
コレクター
Pace.jsは、ページの進行状況を収集するために4つのデフォルトコレクターを持っています。
- Ajax: ページ上のすべてのAJAXリクエストを監視
- Elements: 特定の要素の存在をチェック
- Document: ドキュメントの読み込み状態をチェック
- Event Lag: イベントループの遅延をチェック
これらのコレクターは、以下のオプションで構成または無効化できます。
window.paceOptions = {
ajax: false, // 無効化
document: false, // 無効化
eventLag: false, // 無効化
elements: {
selectors: ['.my-page']
}
};
カスタムソースの追加
独自のソースを追加するには、extraSourcesにクラスを追加します。
window.paceOptions = {
extraSources: [yourCustomSource]
};
API
Pace.jsは以下のメソッドを公開しています。
Pace.start: 進行バーを表示し、更新を開始Pace.restart: 進行バーを再表示し、進行状況をリセットPace.stop: 進行バーを非表示にし、更新を停止Pace.track: 特定のリクエストを明示的に追跡Pace.ignore: 特定のリクエストを明示的に無視
イベント
Pace.jsは以下のイベントをトリガーします。
start: Paceが初期化されたときstop: Paceが手動で停止されたときrestart: Paceが再起動されたときdone: Paceが完了したときhide: 進行バーが非表示になったとき
イベントハンドラをバインドするには、以下のメソッドを使用します。
Pace.on(event, handler, [context])Pace.off(event, [handler])Pace.once(event, handler, [context])
AJAXの追跡
デフォルトでは、Pace.jsはAJAXリクエストを追跡します。特定のリクエストを無視するには以下のコードを使用します。
Pace.ignore(function(){
$.ajax(...)
});
特定のリクエストを強制的に追跡するには以下のコードを使用します。
Pace.track(function(){
$.ajax(...)
});
URLパターンに基づいて特定のリクエストを無視することもできます。
window.paceOptions = {
ajax: {
ignoreURLs: ['some-substring', /some-regexp/]
}
};
互換性
Pace.jsはIE8+（標準モード）、FF 3.5+、Chrome、Safari 4+、Opera 10.5+、および現代のモバイルブラウザをサポートしています。
テーマ
Pace.jsには多くのテーマが用意されています。適切なCSSファイルをインクルードすることで使用できます。
例: Flash Theme
.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;
}
.pace .pace-progress-inner {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px #29d, 0 0 5px #29d;
opacity: 1.0;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-moz-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
-o-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}
.pace .pace-activity {
display: block;
position: fixed;
z-index: 2000;
top: 15px;
right: 15px;
width: 14px;
height: 14px;
border: solid 2px transparent;
border-top-color: #29d;
border-left-color: #29d;
border-radius: 10px;
-webkit-animation: pace-spinner 400ms linear infinite;
-moz-animation: pace-spinner 400ms linear infinite;
-ms-animation: pace-spinner 400ms linear infinite;
-o-animation: pace-spinner 400ms linear infinite;
animation: pace-spinner 400ms linear infinite;
}
@-webkit-keyframes pace-spinner {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes pace-spinner {
0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes pace-spinner {
0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes pace-spinner {
0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes pace-spinner {
0% { transform: rotate(0deg); transform: rotate(0deg); }
100% { transform: rotate(360deg); transform: rotate(360deg); }
}
他のテーマも同様にCSSファイルをインクルードすることで使用できます。