フロントエンドライブラリ:JSページ読み込み進行バー

クズども · 掲載地 2016/01/18 11:02:55

まずレンダリングを見てみましょう。

使いやすく:

ステップ1:テンプレートフォルダ、テーマフォルダ、pace.js、pace.min.jsをプロジェクトにコピーします

ステップ2:CSSスタイルとJSスクリプトの導入

<div><link href="/Content/pace/themes/pace-theme-center-atom.css" rel="stylesheet" /></div><div><scrip{过滤}t src="/Content/pace/pace.min.js"></scrip{过滤}t></div>

コードをコピーします

ステップ3:ページを開けば完了です

カスタム構成

Pace.js自動的にページに読み込まれ、コードにフックする必要がなく、進行状況も自動的に検出されます。調整したい場合は、window.paceOptionsで設定をカスタマイズできます:

<div> paceOptions = {</div><div> // Disable the 'elements' source</div><div> elements: false,</div><div> </div><div> // Only show the progress on regular and ajax-y page navigation,</div><div> // not every request</div><div> restartOnRequestAfter: false</div><div> }</div>

コードをコピーします

また、scrip{filter}tタグにカスタム設定を入れることもできます。例えば:

<scrip{过滤}t data-pace-options='{ "ajax": false }' src='pace.js'></scrip{过滤}t>

コードをコピーします

AMDやBrowserifyを使ってモジュールを読み込む場合は、次のように設定できます(例:スタート):

<div>define(['pace'], function(pace){</div><div> pace.start({</div><div> document: false</div><div> });</div><div>});</div><div></div>

コードをコピーします

APIを使おう

公開されているAPIの一覧Pace.js:

Pace.start:進行バーが表示され始めます。AMDやBrowserifyを使ってモジュールを読み込んでいない場合は、デフォルトで実行されます。
Pace.restart:進行バーがリロードされ表示されます。
Pace.stop:進行バーを隠し、ロードを停止します。
Pace.track:1つ以上のリクエストタスクを監視します。
Pace.ignore:1つ以上のリクエストタスクを無視します。

ファイルダウンロード:

pace-0.5.6.zip (153.26 KB, ダウンロード数: 2)

[JavaScript] フロントエンドライブラリ:JSページ読み込み進行バー

関連記事