状況

初回アクセス時のみローディング画面を表示したいです。
現在の状況はリンク先からからトップページに戻ってくると、毎回アニメーションが発動してしまい煩わしく感じています。
javascriptは初心者どころか全く分からずでご教授いただければと思います。
よろしくお願いします
JQueryローディングアニメーションを実装したのですが、最初の一度だけ(リロード時は表示されないように)アニメーションをしたいのですがうまくいきません。
試したのはこちらです。回答よろしくお願いいたします。

試したこと

js
1   <script>
2    $(function () {
3  var webStorage = function () {
4    if (sessionStorage.getItem('access')) {
5      /*
6        2回目以降アクセス時の処理
7      */
8      $("page_loading").addClass('is-active');
9    } else {
10      /*
11        初回アクセス時の処理
12      */
13      sessionStorage.setItem('access', 'true'); // sessionStorageにデータを保存
14      $("load_area").addClass('is-active'); // loadingアニメーションを表示
15      setTimeout(function () {
16        // ローディングを数秒後に非表示にする
17        $("page_loading").addClass('is-active');
18        $("load_area").removeClass('is-active');
19      }, 3000); // ローディングを表示する時間
20    }
21  }
22  webStorage();
23});
24 
25</script>

css
1.page_loading.is-active {
2  opacity: 0;
3  visibility: hidden;
4}
5
6
7
8.load_area.is-active {
9  opacity: 1;
10  visibility: visible;
11}

ここから下はローディングアニメーションのソースコードです。

html
1<body>
2      <div id="page_loading">
3        <div id="load_area">
4            <div class="loader">Loading...</div>
5            <div id="page_loading_text"></div>
6            <p class="load_p">
7            <span class="load_h">
8               ただいまアクセスが集中しております
9        </div>
10</div>
11</body>

css
1#page_loading {
2    /*fixedで全面に固定*/
3  position: fixed;
4  z-index: 9999;
5  width: 100%;
6  height: 100%;
7  background:#fff;
8  text-align:center;
9  color:#fff;
10	
11}
12
13/* Loadingバー中央配置　*/
14#load_area {
15	position: absolute;
16	top: 50%;
17	left: 50%;
18	z-index: 9999;
19	width: 100%;
20	transform: translate(-50%, -50%);
21	color: #2e2e2e;
22}
23#page_loading_text {
24	width: 40%;
25	color: #fff;
26	margin: auto;
27}

js
1//テキストのカウントアップ+バーの設定
2var bar = new ProgressBar.Line(page_loading_text, {//id名を指定
3  easing: 'easeInOut',//アニメーション効果linear、easeIn、easeOut、easeInOutが指定可能
4  duration: 2500,//時間指定(1000＝1秒)
5  strokeWidth: 0.2,//進捗ゲージの太さ
6  color: '#555',//進捗ゲージのカラー
7  trailWidth: 0.2,//ゲージベースの線の太さ
8  trailColor: '#bbb',//ゲージベースの線のカラー
9  text: {//テキストの形状を直接指定       
10    style: {//天地中央に配置
11      position: 'absolute',
12      left: '50%',
13      top: '50%',
14      padding: '0',
15      margin: '-30px 0 0 0',//バーより上に配置
16      transform:'translate(-50%,-50%)',
17      'font-size':'1rem',
18      color: '#fff',
19    },
20    autoStyleContainer: false //自動付与のスタイルを切る
21  },
22  step: function(state, bar) {
23    bar.setText(Math.round(bar.value() * 100) + ' %'); //テキストの数値
24  }
25});
26
27//アニメーションスタート
28bar.animate(1.0, function () {//バーを描画する割合を指定します 1.0 なら100%まで描画します
29  $("#page_loading").delay(500).fadeOut(800);//アニメーションが終わったら#page_loadingエリアをフェードアウト
30});

yambejp

2022/12/16 00:34

「外部からアクセスしたときに表示させない」と「初回アクセス時のみローディング」が条件がずれていると思うのですが？

行動規範の内容に同意します

回答2件

クッキーかローカルストレージにアクセス済みの情報を保持しておけばよいでしょう

投稿2022/12/16 00:34

yambejp

総合スコア114775

gujhufiugho

2022/12/20 08:20

回答ありがとうございます。上記のローカルストレージやセッションストレージのサンプルコードをネットで書かれていましたが、少し難しかったので、今回はJQueryを使うことにしました。解決方法を記載しました。感謝い致します。

行動規範の内容に同意します

自己解決

html
1<head>
2 <script src="jquery-3.6.0.min.js"></script> 
3
4<!--==============ロード画面の外部アクセス非表示===============-->
5<script>
6  $(function () {
7  var webStorage = function () {
8    if (sessionStorage.getItem('access')) {
9      /*
10        2回目以降アクセス時の処理
11      */
12      $(".loading").addClass('is-active');
13    } else {
14      /*
15        初回アクセス時の処理
16      */
17      sessionStorage.setItem('access', 'true'); // sessionStorageにデータを保存
18      $(".loading-animation").addClass('is-active'); // loadingアニメーションを表示
19      setTimeout(function () {
20        // ローディングを数秒後に非表示にする
21        $(".loading").addClass('is-active');
22        $(".loading-animation").removeClass('is-active');
23      }, 6000); // ローディングを表示する時間
24    }
25  }
26  webStorage();
27});
28  </script>
29<!--==============ロード画面の外部アクセス非表示ここまで===============-->
30</head>
31
32<body>
33<!--====ページ読み込み前のロード画面====-->
34<div class="loading">
35    <div class="loading-animation"> 
36      <div class="loader">Loading...</div>
37      <div class="load_h">
38    <p>Loading...<br>
39    キャンペーン中につき<br>現在注文が殺到しております。</p>
40
41    <div>
42      <div class="load_h2">
43        <p>
44    ただいまアクセスが集中しておりますので、<br>
45    ページの表示までに数秒お時間<span></span>いただく場合がございます。
46    </p>
47      </div>
48    <img src="https://web-creates.com/wp/wp-content/uploads/2021/06/logo.png" class="frog" alt="ひよこ" > </div>
49  </div>
50  </div>
51  </div>
52<!--====END ページ読み込み前のロード画面====-->
53</body>