jQueryで簡単にローディング画像を実装する方法

ローディング画像といえば、くるくると回るアレですね。そうコレ。

実装するのは、もっと難しいんじゃないかと思っていて敬遠していましたが、jQueryであっさりと実装できたので、紹介します。

といっても、ローディング画像を使うというシチュエーションはなかなか無いのですが、僕の場合はMTで作っているサイトのページカウンターの表示に使っています。
静的生成のページの中で唯一カウンターだけ、プラグインで動的にSQLから呼び出して表示しているため、コンテンツ内で一番表示が遅い部分となってしまい、ページが表示されてから1～2秒ほどカウンター部分が空白表示になっているのがカッコわるかったので対応しました。参考にしたのは以下のサイト。
参考サイト：　[jQuery] ローディングのクルクルを瞬殺で実装する

実装自体は本当に簡単です。

1. ローディング画像を用意する。

以下のサイトがローディング画像を好みの感じに生成してくれて便利でした。
Loader Generator

2. HTMLソースに記述する。

jQuery と id="loading" のついた画像をそれぞれ設置します。
jQuery　は要するにページの読み込みがすべて終わったらローディング画像を隠すっていう命令ですね。単純だけど明快でいいですね。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
jQuery(window).load(function(){
  jQuery("#loading").hide();
});
</script>

<div id="contents">
<img src="ローディングのGIF画像.gif" id="loading" alt="loading..." />
～　コンテンツの中身　～
</div>

以上です。
工夫次第で色々と使えると思いますよ。
特にせっかちな人はすぐに更新ボタン連打したりしますので、こういうの用意してあげると親切ですね。