読み込み完了までローディング画像でストレスを軽減する方法

ギャラリーページなど大きい画像を並べていたり、パララックスサイトのように1ページあたりの容量が比較的大きくなるようなページ構成をすると、ユーザー環境によっては配置されている画像が徐々に表示されたり、コンテンツがバラバラに表示されて崩れてしまったり、予期しない表示崩れなどが起こってしまうことがあります。

閲覧しているユーザー視点に立ってみると、スムーズに表示されないページに対して苛立ちを感じる人は多いと考えられます。

ほんのちょっとした引っかかりでページ離脱してしまう原因になることがあるので、イライラを軽減するために、「ローディング画像」を表示して、ストレスを軽減する緩和剤を加えていきます。ページ全体が表示されるまでにかかる時間は同じであっても、「ローディング中」であることをきちんと明示してあることで、わずかな安心感を感じ、少し待ってみようと感じさせる効果があります。

今回は、jQueryを利用したローディング画像の表示を確認していきましょう。

DEMO

画像を用意する

▼ページ内に表示する画像をサンプルとして5つ用意しました。

▼ローディング用の画像として「loading.gif」を用意しました。

HTMLを記述

<body>
<div id="loader">
	<img src="images/loading.gif" width="48" height="48" akt="Loading..." />
</div>

<div id="fade"></div>

<div id="container">
	<ul>
		<li><img src="images/01.jpg" width="100%" /></li>
		<li><img src="images/02.jpg" width="100%" /></li>
		<li><img src="images/03.jpg" width="100%" /></li>
		<li><img src="images/04.jpg" width="100%" /></li>
		<li><img src="images/05.jpg" width="100%" /></li>
	</ul>
</div>
<body>

<body>

</div>

<ul>

</ul>

</div>

<body>

ページの読み込みがすべて完了するまでの間に表示する「loading.gif」と「空要素」を先に記述しておきます。そして#containerの中に5つの画像をリストで並べて配置しています。

CSSを記述

#loader {
	width: 48px;
	height: 48px;
	display: none;
	position: fixed;
	_position: absolute; /* IE6対策 */
	top: 50%;
	left: 50%;
	margin-top: -24px; /* loading.gifの高さの半分(マイナス値) */
	margin-left: -24px; /* loading.gifの横幅の半分(マイナス値) */
	z-index: 10; /* #fadeよりも前に表示する */
}

#fade {
	width: 100%;
	haight: 100%;
	display: none;
	background: #FFF;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5; /* #loaderよりも後ろに表示する */
}

#loader {

width: 48px;

height: 48px;

display: none;

position: fixed;

_position: absolute; /* IE6対策 */

top: 50%;

left: 50%;

margin-top: -24px; /* loading.gifの高さの半分(マイナス値) */

margin-left: -24px; /* loading.gifの横幅の半分(マイナス値) */

z-index: 10; /* #fadeよりも前に表示する */

}

#fade {

width: 100%;

haight: 100%;

display: none;

background: #FFF;

position: absolute;

top: 0;

left: 0;

z-index: 5; /* #loaderよりも後ろに表示する */

}

JavaScriptをoffにしているユーザー対策として、ページを開いたときのデフォルトでは「#loader」と「#fade」は、display:none;で非表示にしています。また、#loaderで囲った「loading.gif」の位置は、ウィンドウの中央に配置するように指定します。

外部JavaScript「loading.js」を記述

$('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");
});

$('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");

});

jQuery本体とloading.jsを読み込む

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/loading.js"></script>

1 2	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="js/loading.js"></script>

以上で完成です。