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

プリロードやローディング画面を簡単に実装できる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>

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

おじいちゃん
おじいちゃん フロントエンドエンジニア / 後藤 寛一

フロントエンドエンジニアのおじいちゃんと言います。本当は24歳です。よろしくお願いします。

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL