Pace.js ページ読み込み進行状況バー plugin_javascript スキル-jsチュートリアル-php.cn

Pace.js ページ読み込み進行状況バー plugin_javascript スキル

WBOY

リリース： 2016-05-16 15:37:38

オリジナル

1343 人が閲覧しました

この記事では、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 つ以上のリクエストタスクを無視します。

基本的には一般的な使用方法ですが、その他の方法もございますので、詳しくは公式サイトをご覧ください。このプラグインが皆さんのお役に立てれば幸いです。