sessionStorageを使って初回だけ読み込まれるローディング画面をJavaScriptで実装してみる（備忘録）

今回はJavaScriptを用いて、sessionStorageを使って初回だけ読み込まれるローディング画面をjavascriptで実装してみる。

ただし、ブラウザを閉じればリセットされ、もう一度ブラウザを開くとローディング画面が読み込まれるように設定している。

つまり、ブラウザを閉じなければ、2回目の読み込み以降はローディング画面が実装されないように設定している。

それでは解説に入っていく。

htmlの記述について

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ローディング</title>
  <link rel="stylesheet" href="../reset.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="js_loading" class="bl_loading">
    <div class="bl_loadingCircle"></div>
    <div class="bl_loadingText">loading...</div>
  </div>
  <main>
    <section>
      <div class="ly_inner" id="menu1">
        <h2>menu1</h2>
        <div class="md_textblock">
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
        </div>
      </div>
    </section>
    <section>
      <div class="ly_inner" id="menu2">
        <h2>menu2</h2>
        <div class="md_textblock">
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
        </div>
      </div>
    </section>
    <section>
      <div class="ly_inner" id="menu3">
        <h2>menu3</h2>
        <div class="md_textblock">
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
        </div>
      </div>
    </section>
    <section>
      <div class="ly_inner" id="menu4">
        <h2>menu4</h2>
        <div class="md_textblock">
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
        </div>
      </div>
    </section>
    <section>
      <div class="ly_inner" id="menu5">
        <h2>menu5</h2>
        <div class="md_textblock">
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
        </div>
      </div>
    </section>
  </main>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="style.js"></script>
</body>
</html>

今回はhtmlのソースは下記の記事と同様である。

該当の記事はこちら

cssの記述について

@charset "utf-8";

/* ==========================
  初期設定
========================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
img {
  width: 100%;
}

/* ==========================
  ローディング画面
========================== */
.bl_loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #444;
  color: #fff;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  opacity: 1;
  visibility: visible;
  transition: 0.3s;
}
.bl_loading.loaded {
  opacity: 0;
  visibility: hidden;
}
@keyframes loading {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.bl_loadingCircle {
  animation: 3s linear loading infinite;
  height: 30px;
  width: 30px;
  border: 1px solid #fff;
  border-top: 1px solid #aaa;
  border-radius: 50%;
  content: "";
  margin-bottom: 10px;
}

/* ==========================
  コンテンツの中身
========================== */
.ly_inner {
  width: 100%;
  max-width: 1080px;
  margin: 100px auto;
  padding: 20px;
  background-color: #ccc;
}
.ly_inner h2 {
  font-size: 150%;
  font-weight: bold;
  margin-bottom: 30px;
}
.md_textblock > * + * {
  margin-top: 10px;
}

CSSの記述も、htmlで紹介した記事と同様である。

JavaScriptの記述について

'use strict';

// ローディング画面
function loadedPage() {
  const loadingID = document.getElementById("js_loading");
  loadingID.classList.add("loaded");
}

if (!sessionStorage.getItem('visited')) {
  sessionStorage.setItem('visited', 'first');
  window.addEventListener('load', function () {
    setTimeout(loadedPage, 2000);
  });
  setTimeout(loadedPage, 5000);
}else {
  loadedPage();
}

sessionStorageについて

sessionStorageに自分で指定した任意のデータを保存できるのだが、その保存したデータがページのセッションが終了するまでは消えずに残っている状態になる。
そして、ページのセッションが終了するとsessionStorageに保存していたデータが消える。

この仕組みによって、初回だけローディング画面を実行させるように処理をしている。

sessionStorageには、データを保存する機能、データを取得する機能がある。また、今回は使用していないがデータを削除する機能もある。

データを保存するときはsetItemを使い、データを取得するときはgetItemを使用する。ちなみにデータを削除する場合はremoveItemを使用する。

setItemにはkeyとvalueの対になる任意の値を入れることができる。今回はkeyをvisited、valueをfirstで入れている。

getItemにはkeyを使って操作していく。今回はvisitedを入れている。

if (!sessionStorage.getItem('visited')) {
  sessionStorage.setItem('visited', 'first');
  window.addEventListener('load', function () {
    setTimeout(loadedPage, 2000);
  });
  setTimeout(loadedPage, 5000);
}else {
  loadedPage();
}

このコードを解説すると、
もしsessionStorageにvisitedというkeyが設定されていない時、sessionStorageのkeyをvisitedに、valueをfirstにして保存。続けてページを読み込んだら2秒後にloadedPageの処理を実行する。読み込みに2秒以上かかる場合は、最低でも5秒経ったら強制的にローディングさせる。

それ以外のsessionStorageにvisitedというkeyが設定されている時、loadedPageの処理を実行する。

これで実装完了だ。

また、今回if文のところで!を使っているのは、これが初めの処理の方が割りやすいと思ったからだ。使いたくなければ、elseとifの内容を逆にして考えればできるので試してみてほしい。

今回はローディング画面で対応したが、例えば他にもポップアップだったり、追従するバナーの表示であったり、色々と応用ができると思うので試してみてほしい。