PAGETOP

おしゃれなローディング画像をサクッと実装するjQueryプラグイン「fakeLoader.js」

おしゃれなローディング画像をサクッと実装するjQueryプラグイン「fakeLoader.js」

ページの読み込みが遅いとき、真っ白な画面が表示されているのと、ローディング画面が表示されているのとではユーザーの印象は変わります。せっかくの訪問者を逃さないためにも、読み込みに時間がかかるページにはローディング画面を出し、数秒の間待ってもらえるような工夫をすることが大切です。
そこで、簡単にローディング画像を表示させることができるjQueryプラグイン「fakeLoader.js」をご紹介します。

その名の通り、読み込みの完了を判断するものではなく、フェイクのローダーを表示させるスクリプトで、一定時間ローディング画像を表示してくれます。

使い方が簡単なので、ある程度ページの読み込み時間が予測できる場合におススメです。

↓デモはこちら

くるくる回るものやウェーブするもの、正方形に動くものなど全部で7種が用意されています。

■使い方

1.ソースをダウンロード

GitHub

fakeLoader.cssと、fakeLoader.min.jsまたはfakeLoader.jsをダウンロードします。
右側の「Download ZIP」をクリックすると、デモも一式ダウンロードできます。

2.スクリプトとcssを読み込む

<head>内でfakeLoader.cssを、<body>の閉じタグ直前で、jQueryとfakeLoader.jsを読み込みます。

[HTML]

<head>
<link rel="stylesheet" href="fakeLoader.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="fakeLoader.js" type="text/javascript"></script>
</body>

3.ローディング画像挿入タグを追加

ローディング画像を表示させるための空タグを<body>内に追加します。
id名は任意ですが、実行コードと対応させるように指定します。

[HTML]

<div id="fakeloader"></div>

4.実行コードを記述

ローディング画像を表示させるスクリプトを、JSファイルの読み込み部分の後ろに追加します。

[JavaScript]

<script type="text/javascript">
$("#fakeloader").fakeLoader();
</script>

設定は以上です。
ローディング画像の表示時間や背景、スピナーの種類などはオプションで指定することができます。

■オプションの指定方法

[JavaScript]

<script type="text/javascript">
$("#fakeloader").fakeLoader({
timeToHide:1200, //ローディング画像を表示させる時間
zIndex:"999",//ローディング画像のz-index値
spinner:"spinner1",//スピナーの種類を選択 ※デモ参照
bgColor:"#2ecc71", //背景色
imagePath:"yourPath/customizedImage.gif" //自分で用意したローディング画像を使いたい場合に指定
});
</script>

手軽で、このスクリプト自体が軽量なのでページに負担をかけません。
大きな画像を使う際などに気軽に試してみてはいかがでしょうか。