さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【JQuery】ローディング画面の設置

Pocket
LINEで送る

画像や動画などの容量が重いコンテンツをページに埋め込んでいる場合などでは、ページが表示正常にされるまでに時間がかかる場合があります。その影響でページが表示正常されるまでレイアウトが崩れた状態でページを見せておくことはなるべく避けたいので、ページが全て読み込まれるまでローディング画面を表示するようにする方法をご紹介します。

htmlにローディング画像が表示される領域を作成

ローディング画面が表示されるボックス「id=”loader”」と「id=”fade”」のdivをbodyの直ぐ下に設置します。「id=”loader”」の中にローディング画像が入り、「id=”fade”」はコンテンツエリアを隠す目隠しボックスになります。

html

<body>
<div id="loader"><img src="../common/img/loading.gif" alt="Loading..." /></div>
<div id="fade"></div>
<div id="wrapper">
コンテンツ表示
</div>
</body>

CSSを設定

「id=”loader”」と「id=”fade”」に以下のようにCSSを設定します。

CSS

#loader {
	width: 16px; /* ローディング画像の横サイズ */
	height: 16px; /* ローディング画像の縦サイズ */
	display: none;
	position: fixed;
	_position: absolute; /* IE6対策 */
	top: 50%;
	left: 50%;
	margin-top: -8px; /* heightの半分のマイナス値 */
	margin-left: -8px; /* widthの半分のマイナス値 */
	z-index: 200;
}

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

JSを設定

jsを以下のように記述します。(htmlに直接記述しても外部jsにしても可)
※js側でcssの設定をしているのはjsオフ時の対応の為です。

Javascript

$('head').append(
    '<style type="text/css">#wrapper { display: none; } #fade, #loader { display: block; }</style>'
);
 
jQuery.event.add(window,"load",function() { // 全ての読み込み完了後に呼ばれる関数
    var pageH = $("#wrapper").height();
 
    $("#fade").css("height", pageH).delay(900).fadeOut(800);
    $("#loader").delay(600).fadeOut(300);
    $("#wrapper").css("display", "block");
});

900の部分はコンテンツ目隠し画面の最小表示時間、800の部分はコンテンツ目隠し画面表示が消えるアニメーションの時間、600の部分はローディング画像の最小表示時間、300の部分はローディング画像表示が消えるアニメーションの時間となります。

ローディング画像の制作

ローディング画像の制作には下記のような自動生成サイトを利用すると便利です。

参考サイト

カテゴリー:HP制作, JQuery

コメントを残す

コメント内容