ローディング画面など初回一回目のみ発火するJS

ロッチくん

サイトにローディング画面を作成したけれど、更新するたびに毎回ローディング画面が表示されるのはユーザビリティ的にどうなのかニャ？

同一ブラウザ内では同じ処理を繰り返したくないときに使えるティップスです。
初回の処理と2回目以降の処理を分けて記載するだけなので比較的簡単です。

今回はこちらの記事で実装しているコードを例に見ていきます。
※タイピング風のローディング画面の解説はこちら↓

こちらの記事ではタイピング風のローディング画面の実装について解説しているのですが、更新するたびにローディング画面が表示されるとユーザーの動きを阻害してしまうため、一回目のアクセス時にのみローディング画面を発火させるようにしたいと思います。

実際に実装されたデモページはこちらです。
初回はタイピング風のローディング画面が表示されますが、その後リロードしてもローディング画面は表示されないかと思います。

いつものようにjQueryを読み込みます。わからない方は以下を参照ください。

jQueryの読み込み方法

jQueryを読み込むにはダウンロードしてサーバーにアップロードする方法とCDNで読みこむ方法とありますが、ここでは手軽にすぐ読み込めるCDNを使った方法を紹介します。

そして今回はタイプライター風のフォントを使いたいのGoogleフォントも自作CSSの上に読み込みます（フォントはなんでもOKなのでやらなくても大丈夫です！）。

<link
    href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Noto+Sans+JP:wght@400;500;700&family=Special+Elite&display=swap"
    rel="stylesheet">

コード解説
最後に

コード解説

HTMLとCSSの記載に関しては以前紹介したタイピング風なローディング画面（jQuery編）と変わりませんが、念のため再掲しておきます。

HTML

<div class="loading-bg">
    <div class="loading-animation-text">
        <p>Typing style loading screen</p>
    </div>
</div>

<div class="wrapper">
    <div class="mainVisual">
        <h1>Typing style loading screen</h1>
    </div>
    <div class="container">
        <section>contents1</section>
        <section>contents2</section>
        <section>contents3</section>
    </div>
</div>

CSS

body {
  font-family: "Special Elite", cursive; 
}
.wrapper {
  width: 100%;
}
.mainVisual {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(./images/fv-image_02.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
h1 {
  font-size: 1.4rem;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.75);
}
.container {
  max-width: 1000px;
  padding: 0 15px; 
  margin: 0 auto;
}
section {
  background-color: rgb(126 121 195);
  width: 100%;
  height: 500px;
  border-radius: 15px;
  margin: 50px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 1.8rem;
}

/*========= Loading ===============*/

.loading-bg {
  width: 100%;
  height: 100vh;
  background-color: #333;
  position: fixed;
  top: 0;
  left: 0;
}

.loading-animation-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 15em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  font-size: 2.8rem;
  line-height: 1.2;
  z-index: 6;
  font-family: "Special Elite", cursive;
  color: rgba(255, 255, 255, 0.75);
  border-right: 2px solid rgba(255, 255, 255, 0.75);
  animation: typewriter 4s steps(40) 1s 1 normal both,
    blinkTextCursor 500ms steps(40) infinite normal;
}

@keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 15em;
  }
}
@keyframes blinkTextCursor {
  from {
    border-right-color: rgba(255, 255, 255, 0.75);
  }
  to {
    border-right-color: transparent;
  }
}


/*========= スマホ用 ===============*/

@media screen and (max-width: 768px) {
  h1 {
    font-size: 1.4rem;
    }
  .loading-animation-text {
    font-size: 1.4rem;
    }
  
}

JavaScript

const webStorage = function () {
  if (sessionStorage.getItem('visit')) {
    $(".loading-bg").css("display", "none");
  } else {
    sessionStorage.setItem('visit', 'true'); 
    $(".loading-bg").delay(4000).fadeOut(4000);
  }
}
webStorage();