fakeLoader.jsでローディング画面を簡単に実装する方法

今回はfakeLoader.jsというライブラリを使ってローディング画面を簡単に実装する方法を紹介します。

ローディング画面はユーザビリティに関わってくるので、少しサイトが重い人は積極的に導入するといいでしょう。

 

fakeLoader.jsをダウンロード

まずはfakeLoader.jsをダウンロードします。

GitHubに上がっているので、Download ZIPをクリックしてダウンロードします。

joaopereirawd/fakeLoader.js

 

使用するのはfakeLoader.cssとfakeLoader.min.jsの2つだけです。

 

fakeLoader.jsの使い方

先にダウンロードしたCSSとjsを読み込んでしまいましょう。

<link rel="stylesheet" href="fakeLoader.css">
<script src="fakeLoader.min.js"></script>

 

HTMLはローディング画面を表示したい場所にid=”fakeLoader”を追加するだけです。

<div id="fakeLoader"></div>

 

スクリプトは以下のようになります。適当なjsファイルを作って読み込むか、head内に書いてください。

    <script>
     $("#fakeLoader").fakeLoader({
       timeToHide:1200, 
       zIndex:999, //
       spinner:"spinner1",//
       bgColor:"#2ecc71",
       // imagePath:"yourPath/customizedImage.gif" 
     });
    </script>

 

オプションは以下の通り。

  • timeToHide:ローディング画面が消えるまでの時間
  • zindex:ローディング画像のz-index。999くらいにしておくのがオススメ
  • spinner:ローディング画像のアニメーションを選択できる。spinner1〜7まで選択可能
  • bgColor:背景色を指定
  • imagePath:任意のgif画像を表示する場合の画像のパス。

 

まとめ

ローディング画面はfakeLoader.jsを使うと簡単に実装できます。

サイトの読み込みに少し時間がかかる人はぜひ導入してみてください。