jQueryで基本的なローディング画面を作る方法

サイズの大きい画像を多用していたり、パララックスをたくさん使っているなど、ページの読み込み速度がどうしても遅くなってしまう場合がありますよね。

読み込み中だと画像が中途半端に表示されて綺麗じゃなかったり、スクリプトがうまく反映されないといった不具合が起きる可能性もあり、ユーザーが離脱してしまう原因になりかねません。

そこでページの読み込み中はローディング画面を表示し、全ての読み込みが終わったらメインのページを表示する方法を紹介します。基本的にはjQueryで実装可能です。

 

HTML

<body>
<div id="loader"><img src="./img/loader.gif" width="XXXX" height="XXXX" alt="Loading..." /></div>
<div id="fade"></div>

<div id="container">
	・・・コンテンツが入ります・・・
</div><!-- /container -->
</body>

 

<body>のすぐ下にローディング画面を記述します。

<div id=”loader”>はローディングが完了するまで表示しておく画面で、gifアニメーションを使用してローディング画面とします。

<div id=”fade”>は空の要素です。

 

CSS

#loader {
	width: XXXXpx;
	height: XXXXpx;
	display: none;
	position: fixed;
	_position: absolute; /* IE6対策 */
	top: 50%;
	left: 50%;
	margin-top: -XXpx; /* heightの半分のマイナス値 */
	margin-left: -XXXpx; /* widthの半分のマイナス値 */
	z-index: 100;
}

#fade {
	width: 100%;
	height: 100%;
	display: none;
	background-color: #FFFFFF;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 50;
}

 

#loaderは画面中央に配置します。

#loaderと#fadeは最初はdisplay: none;で非表示にしておきます。これはJavaScriptをオフにしている人でも正常に動作するようにするための工夫みたいなものです。詳しくは後述。

 

jQuery

$('head').append(
	'<style type="text/css">#container { display: none; } #fade, #loader { display: block; }</style>'
);

jQuery.event.add(window,"load",function() { // 全ての読み込み完了後に呼ばれる関数
	var pageH = $("#container").height();

	$("#fade").css("height", pageH).delay(900).fadeOut(800);
	$("#loader").delay(600).fadeOut(300);
	$("#container").css("display", "block");
});

 

1行目は先ほど触れたJavaScriptをオフにしている人用の処理です。

最初でCSSでローディング画面を非表示にしていました。

JavaScriptがオフになっている人はローディング画面は無しでそのまま#containerを表示、オンになっている人は一度ローディング画面を表示して、読み込みが完了したらまた#containerを表示するという感じです。

 

次の処理はwindow.onloadと同じ処理にしてページが読み込まれたタイミングで実行するようにしています。

window.onloadにしないと通常はソースコードを読み込んだ時点で処理が始まってしまうのでうまく表示できなくなってしまいます。

全ての要素が読み込まれた後は#fadeの高さを#containerと同じにしてフェードアウト、再び#containerの表示という処理を行います。

 

以上が基本的なローディング画面の作り方です。

JavaScriptがオフになっている人でも影響が出ない書き方なので使いやすいんじゃないかなと思います。