ページ読み込み時のローディング画面を手軽に実装する方法のメモ。

ローディング画面を表示されるようにしておくことで、読み込み中のガタガタをユーザーに見せないようにできるメリットがあります。

やっていることはごく簡単で、ページ読み込み中はウィンドウいっぱいにローディング画面を表示し、読み込み完了時に非表示にするという流れです。

ページ読み込み時にローディング画面を表示させるソース

HTML

<div class="loading">
  <img src="images/loading.gif" />
</div>

上記のソースをHTMLのはじめの方、できれば直下あたりに追記してください。

CSS

.loading {
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,1.0);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 20000;
}

.loading img {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -20px;
	margin-left: -20px;
}

CSSは下記のような感じ。背景色はお好みで変更してください。

また、ローディング時にくるくる回る画像についてはgifまたはsvgで用意しましょう。こんな感じのやつですね↓

その他、ロゴ画像を表示したり、やりようによっておしゃれにできると思うのでいろいろ工夫してみてください。

jQuery

$(window).on('load', function(){
	$('.loading').fadeOut();	
});

ページをすべて読み込んだタイミングでローディング画面をフェードアウトさせています。

Lazy Load とは相性が悪いので注意

ちなみにこの方法は、ページの読み込みが完了するまでローディング画面でウィンドウ全体を覆い隠し、読み込み完了時にローディング画面を非表示にするというものです。

そのため、画像の読み込みを遅延するLazy Loadなどのプラグインとは相性が悪いので注意してください。永遠にローディング画面が表示されることになってしまいます。