fakeLoader.js
「fakeLoader.js」は、ページの読み込みなどの際にフルスクリーンのローディングアニメーションを表示するjQueryプラグインです。
あくまでも「フェイク」なので読み込みが終わったかどうかは判断できませんが、デフォルトで用意されたオシャレなローディングアイコンを手軽に表示でき、オリジナルの画像や背景色も選択できます。設置方法が明快で、圧縮版のサイズは2KBという超軽量な点も特徴です。
fakeLoader.jsプラグインはGoogle ChromeなどのモダンブラウザーとInternet Explorer 8以降、スマートフォンではiOS 7.1のSafari、Android 4.1以降の「ブラウザ」に対応しています。
ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。
step1 jQueryプラグインの読み込み
jQuery本体をjQueryの公式サイトから、 fakeLoader.jsを配布ページからダウンロードします。「Download Compressed」ボタンをクリックして保存します。
fakeLoader.js配布ページ
fakeLoader.jsは GitHubでも公開されており、ページ右下の「Download ZIP」ボタンからダウンロードできます。
また、パッケージマネージャーの「bower」でもインストールできます。bowerを導入している場合は、以下のコマンドですぐに利用できます。
Bower install fakeloader
利用するWebページのbodyの閉じタグ直前で、jQuery本体と、ダウンロードした「fakeLoader.min.js」を読み込みます。
//(中略)
<script src="jquery.min.js"></script>
<script src="fakeLoader.min.js"></script>
</body>
//(中略)
次にCSSファイルをhead タグ内で読み込みましょう。
HTML
//(中略)
<link rel="stylesheet" href="fakeLoader.css">
</head>
//(中略)
これで準備はOKです。
step2 基本的な使い方
実際にプラグインの使い方を説明します。
fakeLoader.jsを読み込んだ後、fakeLoader()メソッドを実行します。fakeLoader()メソッドは、使用したい要素をセレクターで指定し、.(ドット)繋ぎで指定します。下の例では「fakeloader」というID名を指定しています。
JavaScript
//(中略)
<script src="jquery.min.js"></script>
<script src="fakeLoader.min.js"></script>
<script type="text/javascript">
$("#fakeloader").fakeLoader();
</script>
</body>
//(中略)
ローディングアニメーションの表示領域として、任意のID名かclass名を付与した空のdivタグをbodyタグ直下に記述します。
HTML
//(中略)
<div id="fakeLoader"></div>
//(中略)
ページを読み込んだときに、下図のようなローディングアニメーションが表示されれば成功です。
step3 オプションによるカスタマイズ
fakeLoader.jsにはいくつかオプションが用意されています。オプションは以下のようにfakeLoader({...})内に指定します。
JavaScript
//(中略)
<script>
$("#fakeloader").fakeLoader({
// ここにオプションを指定する
timeToHide: 1200,
zIndex: 999
});
//(中略)
複数のオプションを指定する場合は、,(カンマ)区切りで指定します。
| オプション名 | 説明 | デフォルト値 |
|---|---|---|
| timeToHide | ローディングアニメーションが消えるまでの時間を指定します。 | 1200 |
| maxSpeedX | particleの、X軸（横）移動の移動時間の最大時間を指定します。 | 0.7 |
| zIndex | ローディングアニメーションの`z-index`の値を指定します。 | "999" |
| spinner | デフォルトで用意された7つのアニメーションを選択します。動きは以下の動画で確認できます。
|
"spinner1" |
| bgColor | 背景色を指定します。Hex,RGB, RGBAで指定できます。 | "#2ecc71" |
| imagePath | オリジナルの画像をプリローディング用の画像として利用できます。 画像までのパスを指定します。 | null |
ローディングアニメーションは、体感速度の軽減やWebサイトのブランディングにつながります。ただし、長すぎるローディング画面をユーザーは歓迎しないので、実装する前に、まずはパフォーマンスをできる限り最適化しましょう
