ホームページ > 記事 > ウェブフロントエンド > Pace.js ページ読み込み進行状況バー plugin_javascript スキル
Pace.js ページ読み込み進行状況バー plugin_javascript スキル
- WBOYオリジナル
- 2016-05-16 15:37:381302ブラウズ
この記事では、pace.js プラグインについて簡単に紹介します。
Pace.js をページに導入すると、ページはリクエスト (Ajax リクエストを含む) を自動的に監視し、イベント ループに遅れが生じた場合、読み込みステータスと進行状況がページに記録されます。このプラグインは互換性が高く、IE8 以降のすべての主流プラグインと互換性があります。さらに、このプラグインの利点は、読み込み進行状況バーのテーマ スタイルを導入できることです。任意の色や複数のアニメーション効果を選択できます。シンプルさ、フラッシュ、MAC OSX、左パディング、上部パディング、カウンターとバウンスなどのアニメーション効果など）、CSS アニメーションの変更が得意であれば、アニメーションの無限の可能性を作成して、Web サイトにパーソナライズされた機能を追加できます。
呼び出し方法:
Pace.js とテーマ ファイルの紹介:
<head> <script src="/pace/pace.js"></script> <link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" /> </head>
カスタム構成:
Pace.js は自動的にページにロードされ、コードにフックする必要はなく、進行状況を自動的に検出します。いくつかの調整を行いたい場合は、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 data-pace-options='{ "ajax": false }' src='pace.js'></script>
AMD または Browserify を使用してモジュールをロードする場合は、次のように設定できます (例: start):
define(['pace'], function(pace){
pace.start({
document: false
});
});
API を使用する:
Pace.js パブリック API リスト:
Pace.start: モジュールのロードに AMD または Browserify を使用していない場合、これはデフォルトで実行されます。
Pace.restart: プログレスバーが再ロードされて表示されます。
Pace.stop: 進行状況バーを非表示にして読み込みを停止します。
Pace.track: 1 つ以上のリクエスト タスクを監視します。
Pace.ignore: 1 つ以上のリクエスト タスクを無視します。
基本的には一般的な使用方法ですが、その他の方法もございますので、詳しくは公式サイトをご覧ください。このプラグインが皆さんのお役に立てれば幸いです。