ページが読み込まれるまで待機するローディング画面の表示方法について紹介します。
はにわまんこの仕組はいろんな場面で使えますし、いろいろと応用できると思います！
目次
コード全体像
#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;
}<div id="loader-bg">
<img src="img/load.gif">
</div>jQuery(window).on('load', function() {
jQuery('#loader-bg').hide();
});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
jQuery(window).on('load', function() {
jQuery('#loader-bg').hide();
});jQuery(window).on('load')がページが読み込まれた後に発動する関数となります。
CSSで画面全体覆う指定をしていた要素に対して、ページが読み込まれた後は、hide()で消すという処理をしています。
おわり
ページ読み込み中のローディング画面を表示するJavaScriptについて紹介しました。
アニメーションなどのタイミングが重要な処理をしている場合は、ローディング画面を入れて確実な表現をさせるのが良いかと思います。
