ページ読み込み中のローディング画面を表示するJavaScript

ページが読み込まれるまで待機するローディング画面の表示方法について紹介します。

コード全体像

<style>
#loader-bg {
		background: #fff;
		height: 100%;
		width: 100%;
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 10;
}
#loader-bg img {	
		background: #fff;
		position: fixed;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		z-index: 10;
}
</style>

<div id="loader-bg">
	<img src="img/load.gif">
</div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
jQuery(window).load( function() {
	jQuery('#loader-bg').hide();
});
</script>

HTML、CSS、JavaScript、それぞれに分けて解説していきます。

HTML

<div id="loader-bg">
	<img src="img/load.gif">
</div>

ロード中に表示させる画像を指定します。外側にクラスを指定してあげてください。

ちなみに画像は、以下のサイトから簡単に作ることができます。
Loader Generator

CSS

#loader-bg {
		background: #fff;
		height: 100%;
		width: 100%;
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 10;
}
#loader-bg img {	
		background: #fff;
		position: fixed;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		z-index: 10;
}

position: fixed;と、z-index: 10;として、ページに被せられるように指定しています。
幅や高さも100%として、完全の覆うようにしましょう。(z-indexは他の要素の値に応じて調整してください。)

画像については、上下左右が中央にくるように指定しています。

JavaScript

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
jQuery(window).load( function() {
	jQuery('#loader-bg').hide();
});
</script>

jQuery(window).load()がページが読み込まれた後に発動する関数となります。

CSSで画面全体覆う指定をしていた要素に対して、ページが読み込まれた後は、hide()で消すという処理をしています。

おわり


ページ読み込み中のローディング画面を表示するJavaScriptについて紹介しました。

アニメーションなどのタイミングが重要な処理をしている場合は、ローディング画面を入れて確実な表現をさせるのが良いかと思います。

このページが気に入ったら
いいね!しよう

最新の情報をお届けします。

同じカテゴリーの記事