2015.10.19

ローディング画面を気軽に実装! PACE.js の使い方

posts_photo
pace.js

ちょっとリッチなコンテンツを作る際に用いられるローディング画面。
今回は読み込むcssを変えるだけでローディングのエフェクトを変更できるPACEの使い方を紹介します。

用意するもの

まずは公式から一式をダウンロードしましょう。
その中から最低限必要なものは以下の通りです。たくさんファイルが入ってますが、本体となるpace.jsとエフェクトの種類を決めるcssを読み込みます。

<link href="pace-theme-barber-shop.css" rel="stylesheet" />
<script src="pace.js" type="text/javascript"></script>

基本的な使い方

基本的には、上記のようにjsとテンプレート用のcssを読み込めば自動的に要素が追加されてローディングエフェクトが追加されます。
ただ、いろいろとオプションも用意されています。

こちらは進捗情報を取得する要素を選択するためのオプション。

paceOptions = {
  ajax: false,
  document: false,
  eventLag: false,
  elements: {
    selectors: ['.sample']
  }
};

ローディングに関するイベントも取得することができます。
イベントのタイミングは、start,stop,restart,done,hideの5つ。下記のような書き方で実行します。

Pace.on("done",function(){
  //Pace正常作動して、ローディングが完了したら実行される処理
  console.log("完了!");
});

他にもいろいろなオプションがあるので公式のドキュメントで確認してみてください。

エフェクトの少し調整したい場合でも読み込むテンプレートcssをカスタマイズすれば良いのでjsが苦手な場合でも、割合カスタマイズしやすいはずです。

やさしいJavaScriptのきほん (やさしいシリーズ)
やさしいJavaScriptのきほん (やさしいシリーズ)
– Amazonで見る


記事のタグ一覧:

スポンサードリンク

関連記事

カテゴリー内のおすすめ記事