JavaScriptでページの読み込み中、ローディング画面を表示する方法
JavaScriptを使ってページの読み込み中はローディング画面を表示したい。
本記事ではこのような悩みを解決。
実装方法について解説します。
実装サンプル
See the Pen
ローディング画面 by Kohei (@kouk05)
on CodePen.0
実装サンプルです。
ローディング画面を表示。
ページのソースが読み込み終わったらコンテンツ（ローディング完了のテキスト）を表示してます。
実装手順は以下の通りです。
HTMLを用意
<div class="loading">
//ローディング画面に表示したいコンテンツ
</div>
まず最初にHTMLでローディング要素を用意します。
本記事では例としてlodingクラス要素を配置します。
CSSでローディング画面を装飾
.loading {
position: fixed;
z-index: 1000;
width: 100%;
height: 100vh;
}
//ローディングが終わったらhideクラスを付与
.loading.hide {
opacity: 0;
pointer-events: none;
transition: opacity 500ms;
}
次にloding画面をCSSで装飾します。
position: fixed;を使ってローディング画面を最前面に配置。
witdh: 100%;、height: 100vh;を指定して画面いっぱいにローディング要素を配置します。
次章でローディングが終わったらhideクラスがlodingクラスに付与される仕様にします。
hideクラスにopacity: 0;、 pointer-events: none;を指定してローディング画面を非表示にします。
JavaScriptでローディング画面を実装
//ローディング要素
const loading = document.querySelector('.loading');
//ページが読み込み終わったら
window.addEventListener('load', () => {
//1秒後に
setTimeout(function() {
//ローディング要素にhideクラスを付与
loading.classList.add('hide');
}, 1000);
});
JavaScriptでローディング画面を実装するコード例です。
querySelectorを使ってローディング要素を取得。
window.addEventListenerのloadを使ってページ全体のソースが読み込み終わったらという関数を定義。
上記関数内でclassList.addを使いhideクラスを付与します。
任意でソースが読み込み終わった後に、数秒待機処理をしたい場合はsetTimeout関数を使いましょう。
第二引数に待機時間をミリ秒で指定してください。
以上で実装完了です。
まとめ
JavaScriptを使ってページの読み込み中、ローディング画面を表示する方法について紹介しました。
以上で解説を終わります。