[jQuery入門1] サイトのローディング画面をサクッと作る方法♪

jQueryの入門として簡単に画面読み込みの際、ローディング画面を作っちゃいまししょう。

用意するもの

ローディング中の画像を用意します。
こんな感じのやつ。
[jQuery入門1] サイトのローディング画面をサクッと作る方法♪

これは、Gifアニメーションで作られています。
こちら、自分で作ったわけではなくジェネレータサイトで作ってみました。

loadergeneratorというところで、
登録不要!無料でいろんなパターンのローディング画像作れます。
よかったらこちらで作成して用意してみてください。
http://loadergenerator.com/

HTML

HTMLでは、divでローディング中に表示するものとローディング完了後に表示するもの2つのdivを用意します。

CSS

CSSでは、ローディング画像を中央に揃える設定をしています。
また、ローディング完了後に表示するものには、display:none;を設定します。
[ad#co-4]

jQuery

 

まとめ

結構楽チンですね♪
サンプルもこちらに載せました。

ローディングさせるものが全くないのですぐ表示されますが動き的には問題ないはずです。
よかったらご参考までに♪