ローディングアニメーションを1度だけ実装したいのですがうまくいきません

ローディングアニメーションを実装したのですが、最初の一度だけ(リロード時は表示されないように)アニメーションをしたいのですがうまくいきません。
試したのはこちらです。こちらを組み合わせるのかそれとも１から作り直すのでしょうか？

javaScript
1window.addEventListener("load", function() {
2  setTimeout(function() {
3    document.getElementById("loading").classList.remove("active");
4  },3000)
5});
6
7window.onload = function () {
8  if(localStorage.getItem('loading') === null || localStorage.getItem('loading') != "1"){
9 
10    localStorage.setItem('loading',"1");
11  }
12 
13 };

yambejp

2021/09/28 00:19

> 最初の一度だけの定義をもう少しはっきりしてください一度表示したらブラウザを閉じても二度と表示されないのでしょうか？リロード時には表示されないのでしょうか？

leomessi

2021/09/28 12:11

リロード時に表示されないようにに変更いたしました！

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

回答3件

javascript
1<style>
2body.loading{
3  background-Color:gray;
4}
5body.loading:before{
6content:"loading...";
7position:fixed;
8top:50%;
9left:50%;
10}
11body{
12height:200%;
13}
14</style>
15<script>
16window.addEventListener('pageshow',()=>{
17  const flg=window.performance.navigation.type;
18  if(flg==0){
19    document.body.classList.add('loading');
20    setTimeout(()=>document.body.classList.remove('loading'),3000);
21  }
22});
23</script>

投稿2021/09/29 00:17

編集2021/09/29 00:17

yambejp

総合スコア116734

leomessi

2021/09/29 12:43

ご回答ありがとうございます。loadingクラスにactiveがついた時にローディングアニメーションが流れるという設定をしたいのですが、ご教授して頂いた上記の部分で実装しようとすると、navigationの文字のところに線が引かれてしまっています。何か原因なのでしょうか。 ```JavaScript window.addEventListener('pageshow',()=>{ const flg=window.performance.navigation.type; if(flg==0){ document.body.getElementById("loading").classList.add('active'); setTimeout(()=>document.body.classList.remove('active'),3000); } }); ```

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

ベストアンサー

なるほどのう。

こちらを組み合わせるのかそれとも１から作り直すのでしょうか？

という質問に対する答えとしては「組み合わせる」やけど、より正確にいえば、「組み合わせて、少しコードを加える」かのう。

こんな感じにしたらええのんちゃう？

まず、

初期状態では、ローディングアイコンには、active クラスを付けないでおく

ようにしたうえで、window の load リスナーの中で、

localStorageからキー loading の値を取り出そうとしてみる。
取り出してみたが null だったら、以下の2点(2-1, 2-2)を行う。

2-1. ローディングアイコンのクラスに、activeを追加してローディングアイコンを可視化する。
2-2. 下記の2点2-2Aと2-2Bを行う関数が3秒後に実行されるように、setTimeout に仕込む。
2-2A. ローディングアイコンのクラスからactiveを削除して非表示にする。
2-2B.　localStorageのキー loading に "1" を設定

という流れです。

あと一点、お節介しときますぅ〜。

localStorage に保存する値のキーは loading やなくて、「初回のページビューが完了した。」という意味で、
first-viewed
とか
done-first-view とか（もっと良いのがあるかもわからん。）にして、保存する値は "1"という文字列でもええっちゃええけど、"true" という文字列を保存することにして、取り出すとき

javascript
1const doneFirstView = JSON.parse(localStorage.getItem('done-first-view') || 'false');

とすれば、doneFirstView に true か false のboolean値として、初回のページビュー済みか？のフラグが取れます。それか、first-view-date というキーにして、初回表示の日時を入れておくとかもアリやもしれへん。

追記

参考になりそうなもん、ざっくり作ってみたで。丸っとコピペしたHTMLファイルを作って表示させてみたってや〜

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>teratail 361619</title>
6  <script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.7/dayjs.min.js"></script>
7  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css">
8  <script>
9    document.addEventListener('DOMContentLoaded', function () {
10      const FIRST_VIEWED_KEY = 'first-viewed-at';
11      const loadingIcon = document.getElementById("loading");
12
13      const firstViewedAt = localStorage.getItem(FIRST_VIEWED_KEY);
14      if (!firstViewedAt) {
15        loadingIcon.classList.add("active");
16        setTimeout(function () {
17          localStorage.setItem(FIRST_VIEWED_KEY, dayjs().format('YYYY/MM/DD HH:mm:ss'));
18          loadingIcon.classList.remove("active");
19        }, 3000);
20      }
21
22      // ボタンをクリックすると、localStorageに保存した初回ページビュー日時を消去
23      const clearBtn = document.getElementById("clearBtn");
24      clearBtn.addEventListener('click', function() {
25        localStorage.removeItem(FIRST_VIEWED_KEY);
26      });
27
28    });
29  </script>
30  <style>
31    #loading { display: none; }
32    #loading.active { display: block; }
33  </style>
34</head>
35<body>
36<h2>Hello World</h2>
37<div class="fa-3x" id="loading">
38  <i class="fas fa-spinner fa-pulse"></i>
39</div>
40<button id="clearBtn">リセット</button>
41</body>
42</html>
43

投稿2021/09/27 15:43

編集2021/09/28 15:27

退会済みユーザー

総合スコア0

leomessi

2021/09/28 12:43 編集

丁寧に回答ありがとうございます！現在この状態のなのですが、ここから2-2A,2-2Bはifでまた括るのでしょうか？ ```javaScript window.onload = function () { if(localStorage.getItem('loading') === null || localStorage.getItem('loading') != "1"){ window.addEventListener("load", function() { setTimeout(function() { document.getElementById("loading").classList.add("active"); },3000) }); localStorage.setItem('loading',"1"); } }; ```

退会済みユーザー

2021/09/28 15:30

これだと期待通りには動かないやろな〜。回答に、ざっくり作ったの追記したんで、参考にしてもろたら〜

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

処理を記述してますか？

js
1window.onload = function () {
2  if(localStorage.getItem('loading') === null || localStorage.getItem('loading') != "1"){
3
4   //ここに処理を記述してください。
5
6    localStorage.setItem('loading',"1");
7  }
8
9 };

投稿2021/09/27 15:02

akihiro3

総合スコア955

leomessi

2021/09/27 15:21 編集

こういった形で変えてみたのですが、この場合ですとactiveクラスが消されず、ローディングアニメーションが消えなくなってしまいます。 window.onload = function () { if(localStorage.getItem('loading') === null || localStorage.getItem('loading') != "1"){ window.addEventListener("load", function() { setTimeout(function() { document.getElementById("loading").classList.remove("active"); },3000) }); localStorage.setItem('loading',"1"); } };

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

あなたの回答