Written by Kasumi

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.addEventListenerloadを使ってページ全体のソースが読み込み終わったらという関数を定義。

上記関数内でclassList.addを使いhideクラスを付与します。

任意でソースが読み込み終わった後に、数秒待機処理をしたい場合setTimeout関数を使いましょう。

第二引数に待機時間をミリ秒で指定してください。

以上で実装完了です。

まとめ

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

以上で解説を終わります。

目次

関連記事

JavaScript

JavaScriptでクラスを継承。親の関数・メソッドを子で呼び出す方法

2022.12.20
2737
JavaScript

JavaScriptで異なる配列を同じ関数に渡して処理を使い回す方法【applyメソッドが便利】

2022.12.11
1655
JavaScript

JavaScriptでマウスが要素をhoverしたか判定する方法

2022.11.10
3113
JavaScript

JavaScriptの配列で条件一致する要素だけ抽出する方法【filterメソッドを使おう】

2023.01.04
6893