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

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

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

使いやすく:

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

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

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

カスタム構成

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

ログインが見えます。

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

ログインが見えます。

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

ログインが見えます。

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ページ読み込み進行バー

関連記事

閲覧したセクション