ホームページ > 記事 > ウェブフロントエンド > Pace.js – Web ページの自動読み込みプログレスバー プラグイン
Pace.js – Web ページの自動読み込みプログレスバー プラグイン
- 高洛峰オリジナル
- 2016-12-16 16:45:151323ブラウズ
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="external nofollow" 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 つ以上のリクエストタスクを無視します。
pace.js – Web ページ自動読み込みプログレスバー プラグインに関するその他の記事については、PHP 中国語 Web サイトに注目してください。