こんにちは、おじいちゃんです。
今回は簡単にプリロードやローディング画面を実装できるjQuery.ImgLoaderの使い方をご紹介したいと思います。
jQuery.ImgLoaderとは
多くの画像やWebフォントを使うサイトを作成する場合、ロードにかかる時間が長くなり、デザインが反映される前の状態をユーザに見られてしまうことがあります。
デザインは綺麗な状態を見てもらいたいですよね。
そんなときはローディング処理を簡単に実装できるjQuery.ImgLoaderを使って、ローディング画面を作ってあげましょう。jQuery.ImgLoaderは画像のプリロードを行うライブラリなのですが、ローディング画面も実装することができます。
準備
まずはImgLoaderを使うための準備をします。
下記URLからダウンロードしてみましょう。
https://github.com/Takazudo/jQuery.ImgLoader
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>LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
