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

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

用意するもの

ローディング中の画像を用意します。
こんな感じのやつ。

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

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

HTML

		<div id="loading">
			<img src="img/gif-load.gif">
		</div>
		<div id="main">
			読み込み完了読み込み完了読み込み完了読み込み完了読み込み完了読み込み完了
		</div>

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

CSS

body{
width:100%;
height:100vh;/* ブラウザがIE9以上対応 */
position:relative;
}
#loading{
width:85px;
height:85px;
position:absolute;
top:50%;
left:50%;
margin:-42.5px 0 0 -42.5px;
}
#main{
display:none;
opacity:0;
}

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

jQuery

	<script type="text/javascript">

		//読み込みが完了したら起動
		window.onload = function(){
			$(function(){
				//ローディング中に表示するものをfadeOutさせる
				$("#loading").fadeOut();
				//ローディング完了後に表示するものを表示させる
				$("#main")
					.css({display : "block"})
					.animate({opacity : "1"},2000);
			});
		}
	</script>

 

まとめ

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

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