jqQueryでローディング画面をだしてみる

画像を多く使うサイトなど読み込み時に反応が遅いと

なんだこのサイトは!!…と

ちょっとイラっときたりするのがユーザー!

そんな時は一度ローディング画面で
ブラウザを覆ってしまい、
全ての読み込みが完了した際に
表示してあげれば、イライラUIが解消されるかもしれません。

jQueryで簡易実装してみましょう

http://www.ajaxload.info/

こういう便利なサイトがあるので
ローディングのアニメgifを用意しておきます。

画像が準備できたら、divをbodyタグのスグ↓あたりに用意します。

【html】

<div class ="loadingWrap"><img src="準備した画像.gif"></div>

【css】

.loadingWrap{
	width: 100%;
	height: 100%;
	background: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index:99;
}
.loadingWrap img{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -10px;
	margin-left: -21px;
}

【jQuery】

$(window).load(function(){

$(".loadingWrap").fadeOut();

});

こんな感じで完了です。
非常に簡単ですね。

発火のタイミングは
$(document).readyではなく
$(window).load

にしてあげるのがミソですね。

前者は画像を読み込む以前に発火してしまう
可能性があるのです。

お試しあれ