ホームページ >ウェブフロントエンド >jsチュートリアル >Pace.js ページ読み込み進行状況バー plugin_javascript スキル

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

WBOY
WBOYオリジナル
2016-05-16 15:37:381371ブラウズ

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

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。