NTTドコモ様_dカーシェア
NTTドコモ様_dカーシェア
2015.05.29

プリロードやローディング画面を簡単に実装できるjQuery.ImgLoaderの使い方

おじいちゃん

こんにちは、おじいちゃんです。
今回は簡単にプリロードやローディング画面を実装できるjQuery.ImgLoaderの使い方をご紹介したいと思います。

jQuery.ImgLoaderとは

多くの画像やWebフォントを使うサイトを作成する場合、ロードにかかる時間が長くなり、デザインが反映される前の状態をユーザに見られてしまうことがあります。

デザインは綺麗な状態を見てもらいたいですよね。

そんなときはローディング処理を簡単に実装できるjQuery.ImgLoaderを使って、ローディング画面を作ってあげましょう。jQuery.ImgLoaderは画像のプリロードを行うライブラリなのですが、ローディング画面も実装することができます。

準備

まずはImgLoaderを使うための準備をします。
下記URLからダウンロードしてみましょう。

bowerを利用している方は、下記コマンドでダウンロードすることができます。

bower i git://github.com/Takazudo/jQuery.ImgLoader.git

 
次にjQueryImgLoaderを読み込ます。
ImgLoaderはjQuery依存のライブラリなのでまずはjQueryを読み込みます。

<script src="./lib/js/jquery/jquery-1.11.1.min.js"></script>

 
ダウンロードしたImgLoaderを読み込みます。

<script src="./lib/js/jQuery.ImgLoader/jquery.imgloader.js"></script>
  • 1
  • 2