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

2018.02.26 2018.03.26jQuery
ページ読み込み時のローディング画面をjQueryで手軽に実装する方法

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

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

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

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

■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).load(function(){
	$('.loading').fadeOut();	
});

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

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

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

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

WordPressテーマ『HIGHLAND』公開しました

WordPressテーマ『HIGHLAND』を公開しました

このブログで紹介しているカスタマイズを、これでもかと盛り込んだ高性能なテーマになっております。商用・非商用問わず無料、是非ご利用ください。

柴田 竹思

柴田 竹思

日本&ベトナム二拠点生活中のWeb系フリーランス。最近は育児6:仕事4のバランスで生活してます。これでもかってくらい奥さんの尻に敷かれてる座布団系男子です。

プロフィールはこちら