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で指定した条件に当てはまる配列要素があるか存在をチェック。true/falseで判定する方法

2023.01.05
343
JavaScript

JavaScriptで配列要素にある数値・文字列を加算。合計を取得する方法

2022.12.30
407
JavaScript

JavaScriptで配列を複製。新しい配列を作成する方法【mapメソッドを使おう】

2023.01.09
340
JavaScript

JavaScriptで文字列と変数を組み合わせて出力する二つの方法

2022.11.28
284