初回アクセス時のみローディング画面を表示させたい

Question

実現したいこと

初回アクセス時のみローディング画面を表示させたい

発生している問題・分からないこと

ページ遷移をするたびにローディング画面が出てきてしまうのですが、初回アクセス時のみローディング画面を表示させたいです。

該当のソースコード

<!--ローディング-->
    <div id="loading">
      <div class="loader001"></div>
    </div>

/*ローディング*/
/* ベースの本体 */
#loading {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: #9a9a9a;
  transition: all 1s;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}
#loading.loaded {
  opacity: 0;
  visibility: hidden;
}

/* 001 */
.loader001,
.loader001:before,
.loader001:after {
  background: #ffffff;
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}
.loader001 {
  color: #ffffff;
  text-indent: -9999em;
  margin: 88px auto;
  position: relative;
  font-size: 11px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader001:before,
.loader001:after {
  position: absolute;
  top: 0;
  content: '';
}
.loader001:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader001:after {
  left: 1.5em;
}
@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}

 //ローディング
  // クラス変更
window.onload = function () {
    const spinner = document.getElementById('loading');
    spinner.classList.add('loaded');
}

//safari対策
window.onpageshow = function (event) {
    if (event.persisted) {
        window.location.reload();
    }
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

自分なりに調べながらコードを触ってみたのですが、理解力に乏しく実現できませんでした。

補足

特になし

Comments

[maisumakun]

> 初回アクセス時のみローディング画面を表示させたいです。

現状のコードに、それを実現しようとして書いた部分はありますか？

[ymyo]

ご回答ありがとうございます。
色々なサイトを見て試してみたのですが結果うまくいかず消したので、現状のコードに該当部分はありません、、

Answer 1

クッキーかlocalStorageでアクセス済みかどうかを保持してみてはどうでしょうか？

参考

こんな感じでわかりますか？
（初回しかローディングがでないと１回しか動作確認できないのでクリアボタンを用意してあります）

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const accessed=localStorage.getItem("accessed");
  if (!accessed) dlg.showModal();
  dlg.addEventListener('click',()=>dlg.close());
  localStorage.setItem("accessed",1);
  clear.addEventListener('click',()=>localStorage.removeItem("accessed"));
});
</script>
<style>
#dlg{
border:0;
outline: none;
background-Color:rgba(0,0,0,0);
}
#dlg::backdrop{
background-Color:rgba(0,0,0,.2);
}
</style>
<dialog id="dlg">
click here!
</dialog>
contents
<input type="button" value="clear" id="clear">

Comments

[ymyo]

ご回答ありがとうございます！
ネットの情報でなんとか反映させようと以下のコードをJSに追加したのですが、うまくいきません、、、どこをどのように修正すれば良いでしょうか？

$(function () {
var webStorage = function () {
if (sessionStorage.getItem('access')) {
$('#loading').fadeOut("slow");
} else {
sessionStorage.setItem('access', 'true');
setTimeout(function () {
$('#loading').fadeOut("slow");
}, 3000);
}
}
webStorage();
});

[ymyo]

ありがとうございます！こちらをHTMLのhead内に記述すれば良いのでしょうか？

[yambejp]

>こちらをHTMLのhead内に記述すれば良いのでしょうか？

運用方法についてはテストして想定と合っていればそのまま流用し、違えばそれに合わせた設定にしてください。

[ymyo]

head内に記述したのですが、解消しませんでした・・・。不勉強ですみません・・・。

[miyabi_pudding]

横槍すみません。
もしや、ローカルサーバーではなく、htmlファイルをダブルクリックで開いていませんか？

https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage

によると、ファイルを直接開いた状態では、動作の保証はされない、との旨がありますので、
XAMMPなり、MAMPなりを使い、httpアクセスから動作検証をした方がよいかと思います。
（もし、ファイルを直接開いてるのならば）

[Lhankor_Mhy]

横からすみません。yambejpさんが書かれたコードはサンプルであってそれ単独で動くものです。
ymyoさんが書かれたコードの中にそのまま埋め込んでも期待した動作にはならないと思いますが、その辺りはご理解されていますか？