JavaScriptで読み込み中にローディング画面を表示する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptで読み込み中にローディング画面を表示する方法について解説しています。今回はJavaScriptのonloadイベントを使用しています。ページ全体が読み込まれた後に動作するプログラムになります。他にもsetIntervalやsetTimeoutなどの関数を使う方法もあります。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptで読み込み中にローディング画面を表示する方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

読み込み中にローディング画面を表示する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

ローディング画面とは

Webサイトを表示するときにサイトが重かったり、ネットワーク通信が遅かったりするとページの読み込み・表示に時間がかかる場合があります。

読み込み途中の画面をユーザーに見せないようにするために、ページの読み込みが完了するまでに別の待機画面を表示させたいときがあります。

そのときに使用する待機画面を「ローディング画面」といいます。

 

ローディング画面を表示する方法

JavaScriptでローディング画面を表示するためには表示したい画面とは別に画面遷移後、一番最初に表示する画像が必要です。

そして、本来表示したい画面の情報が全て読み込まれたあとに最初に表示した画像を非表示にする処理が必要です。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

HTML

<!-- ローディング用 -->
<div id="showloading">
<!-- ローディング中に表示する画像(GIF)を用意 -->
<img src="img/loading.gif" alt="loading">
</div>
<!-- コンテンツ(読み込みに時間がかかる画像ファイルのため読み込みが終わるまで非表示) -->
<div id="contents" class="hidden">
<img src="img/demo-img01.jpg" alt="">
<img src="img/demo-img02.jpg" alt="">
<img src="img/demo-img03.jpg" alt="">
<img src="img/demo-img04.jpg" alt="">
<img src="img/demo-img05.jpg" alt="">
<img src="img/demo-img06.jpg" alt="">
<img src="img/demo-img07.jpg" alt="">
<img src="img/demo-img08.jpg" alt="">
</div>

 

CSS

/*画面全体にローディング画面を表示*/
#loading {
width: 100%;
height: 100vh;
background-color: #fff;
position: relative;
}
#loading img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hidden {
display: none;
}

 

JavaScript

// ローディング画面のdivを取得
var showloading = document.getElementById('showloading');
// 画面本体のdivを取得
var contents = document.getElementById('contents');
// 読み込みが完了したら発動
window.addEventListener('load', function () {
// loadingのdivを非表示に
showloading.style.display = 'none';
// contentsのdivを表示
contents.classList.remove('hidden');
});

 

筆者プロフィール

この記事を監修してくれた方

水野大輝(みずのたいき)

2014年より、某物流会社のシステム開発担当として入社

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。
現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。