0から始めるJavaScriptの学習記録　その５　【Lording画面表示】

こんにちは朱夏です。

今回もJavaScriptの勉強を続けていこうと思います。
今回は、画面の読み込み時に表示されるLoading画面を作ってみたいと思います。

実装したい内容は以下です。

読み込み中の回転するアイコン
読み込み後にLoading画面が自動で消える
サイトの内容がフェードイン

それではやっていきます。

コード

先ずはコードを置いておきます。

HTMLからです。

<!DOCTYPE html>
<html lang="ja">
   <head>
      <meta charset="UTF-8"> 
      <title>JavaScript練習</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
      <link rel="stylesheet" href="css/style.css">
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
      <script src="https://kit.fontawesome.com/da0fa6be04.js" crossorigin="anonymous"></script>

     <!--[if lt IE 9]>
     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
     <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
     <![endif]-->
   </head>
   <body>
      <!----- ヘッダー ----->
      <header>
         <h1>Load画面</h1>
      </header>
      <!----- ヘッダー END ----->
      <!----- メインコンテンツ ----->
      <div id="loadbox">
         <div class="d-flex justify-content-center mt-5 pt-5">
            <div class="text-center loadimg spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
               <span class="sr-only">Loading...</span>
            </div>
            <div>
               <h1>Loading...</h1>
            </div>
         </div>
      </div>
      <div id="contents" class="hidden">
         <img class="fadein" src="ここに画像パス" alt="テスト">
         <!-- ここにimgを複数つくります -->
         <img class="fadein" src="ここに画像パス" alt="テスト">
      </div>
      <!----- メインコンテンツ END ----->
      <!----- フッター ----->
      <footer>
         <p class="">(c)test.com</p>
      </footer>
      <!----- フッター END ----->
      <script src="js/sample.js"></script>
   </body>
</html>

次にCSSファイルです。

#loadbox {
    width: 100%;
    height: 100vh;
    background-color: #fff;
    position: relative;
}

.hidden {
    display: none;
}

.fadein {
    animation-name: fade-in;
    animation-duration: 3s;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

最後にJavaScriptファイルです。

'use strict'

var loadbox = document.getElementById('loadbox');
var contents = document.getElementById('contents');

window.addEventListener('load', function () {
    loadbox.style.display = 'none';
    contents.classList.remove('hidden');
});

これで実現できました。

解説

今回一番大変だったのは、読み込みが短すぎるとLoading画面が表示されたか確認できない事でした。

読み込みに時間をかけるために、画像を複数枚（10枚程度）用意してわざと読み込み時間を長くして動作がうまくいっているかの検証をしました。

では、実装したものを見ていきます。

読み込み中の回転するアイコン

これは、Bootstrapのスピナーで実現しています。
HTMLの記述だけで実現できるのはとても便利です。

読み込み後にLoading画面が自動で消える

JavaScriptでLoading後の動きを指定しています。
動きとしては、要素に付けたidによって対象を特定、Loading画面を消す、サイト内容を格納していた要素からclassを消す、の3つの動作をしています。

サイトの内容がフェードイン

要素に付与されていたclassが消されたことで、CSSで指定されていた「display: none;」が無効化されました。
それにより、読み込まれた画像がLoading画面の代わりに表示されるといった流れです。

この表示されるときのアニメーションをCSSでつけてあげれば、今回の実装内容は実現できました。