ローディング画面について

Question

実現したいこと

トップページのローディング画面について質問させてください。
現在、トップページにローディングを実装しています。
なお、ホームページ内のページ遷移からトップページ表示時は、ローディングを非表示にしています。

クライアント様から、検索画面→トップページ表示→検索画面に戻る→再度トップページ表示した際に、ローディングを表示したいとのご要望があり、試行錯誤しているところです。

ちなみに、’loading_bg’クラス・’body’タグは初めからdisplay:none;にしています。
’loading_bg’は、ページ遷移の際に、トップページに行くとローディング画面がちらつくのが気になったためです。
’body’タグは、ローディングが始まる前に一瞬読み込み前の画面が表示されるのが気になり、非表示にした方が気にならずに済んだからです。。。

/* ====================================
  　ローディング */

  $(document).ready(function() {
    var time = new Date().getTime();
    var h = $(window).height();

    // セッションストレージから初回訪問のフラグを取得
    var isFirstVisit = sessionStorage.getItem('isFirstVisit');

    if (!isFirstVisit) {
        // 初回の訪問時にのみ実行
        sessionStorage.setItem('isFirstVisit', 'true'); // セッションストレージに初回訪問情報を保存
        showLoadingScreen(); // ローディング画面を表示する関数を呼び出す
    } else {
        // 2回目以降の訪問時には非表示
        // ページ読み込みの際に非表示にするため、すぐに実行
        hideLoadingScreen();
    }

    // すべての読み込みが完了したら実行
    $(window).on('load', function() {
        var now = new Date().getTime();
        if (now - time <= 1000) {
            setTimeout(function() {
                stopload();
            }, 1000 - (now - time));
        } else {
            stopload();
        }
    });

    // 5秒たったら強制的にロード画面を非表示
    $(function() {
        setTimeout(function() {
            stopload();
        }, 5000);
    });
});

function showLoadingScreen() {
    var h = $(window).height();
    $('.loading_bg').height(h).css('display', 'block');
}

function hideLoadingScreen() {
    // フェードアウトのアニメーションを追加
    $('.loading_bg').fadeOut(500, function() {
        // アニメーション完了後、非表示にする
        $(this).css('display', 'none');
    });
}

function stopload() {
    hideLoadingScreen(); // ローディング画面を非表示にする
    $(".wrapper").animate({
        "opacity": 1
    }, 500);
}

// ローディングの直前に表示を戻す
document.addEventListener('DOMContentLoaded', function() {
    document.body.style.display = 'block';
});

試したこと

currentURL 変数を使用して現在のURLを取得し、それが https://〇〇〇.jp であるかどうかをチェックする記述を試してみましたが、間違っているのか思っている動作になりません。

どこを修正したらよいのか、宜しければご教授いただけると幸いです。
質問が分かりにくく申し訳ございません。
よろしくお願いいたします。

$(document).ready(function() {
    // クッキーまたはセッションストレージから訪問状態を取得
    var hasVisited = sessionStorage.getItem('hasVisited');
    
    // ブラウザの戻るボタン操作を検出
    window.addEventListener('popstate', function(event) {
        if (event.state && event.state.hasVisited) {
            if (window.location.href === 'https://〇〇〇.jp/') {
                showLoadingScreen();
            }
        }
    });
    
    if (!hasVisited) {
        // 初回アクセス時またはページ更新時にのみ表示
        sessionStorage.setItem('hasVisited', 'true');
        showLoadingScreen();
    }
    
    // すべての読み込みが完了したら実行
    $(window).on('load', function() {
        stopload();
    });
    
    // 5秒たったら強制的にロード画面を非表示
    $(function() {
        setTimeout(function() {
            stopload();
        }, 5000);
    });
});

function showLoadingScreen() {
    // ローディング画面を表示
    $('.loading_bg').css('display', 'block');
}

function hideLoadingScreen() {
  // フェードアウトのアニメーションを追加
  $('.loading_bg').fadeOut(500, function() {
      // アニメーション完了後、非表示にする
      $(this).css('display', 'none');
  });
}

function stopload() {
  hideLoadingScreen(); // ローディング画面を非表示にする
  $(".wrapper").animate({
      "opacity": 1
  }, 500);
}

// ローディングの直前に表示を戻す
document.addEventListener('DOMContentLoaded', function() {
    document.body.style.display = 'block';
});
  

Comments

[Lhankor_Mhy]

補足願います。

1. 『検索画面』とはクライアントのサイトにある検索画面という理解でいいですか？
2. 1の通りであるなら、『検索画面→トップページ表示→検索画面に戻る→再度トップページ』というのは、履歴の中で検索画面を2回以上経由した場合、というような意味でいいでしょうか？

[natsumi201]

分かりにくい質問で大変申し訳ありません。
『検索画面』とは、ブラウザの検索画面です。
ブラウザで該当のHPを検索し、検索に出てきたトップページをクリックし表示→ブラウザの検索画面に戻る→再度トップページをクリックした際にローディング画面を表示することが目的です。

[Lhankor_Mhy]

ありがとうございます。
たびたびすみませんが、補足願います。

3. 「ブラウザの検索画面」というのは、Google とかの検索サービスのことかと思うのですが、Bing や Yahoo などいろいろあると思うんですが、対象とするサービスはリスト化されていますか？
4. また、『A検索画面→トップページ表示→A検索画面に戻る→（いろいろなサイトを閲覧する）→B検索画面→再度トップページ』のような場合も含んでよい（判別できないので）ですよね？

[natsumi201]

3.のブラウザに関しては、
・Google Chrome.
・Firefox.
・ Edge.
・Safari.
を対応できれと思います。。。

4.についてですが、仰る通りの場合も含みたいです！

[Lhankor_Mhy]

3 の「ブラウザの検索画面」について、Google などの検索サービスを想定していたのですが、挙げられているものを見るとブラウザの名称のように見えました。natsumi201 さんのおっしゃる「ブラウザの検索画面」とはどういったものでしたでしょうか？　ブックマークですか？

[natsumi201]

すみません！
私が勘違いをしていたようです。
検索サービスはリスト化しておりませんが、Google検索がメイン対象になる予定です。

Answer 1

お望みの形と違うかもしれませんが、2回目以降の来訪で、リファラがGoogleであった場合にアラートを出すスクリプトは以下の通りです。

const visitedTimes = Number(sessionStorage.getItem("visited"));
if (visitedTimes > 1 && document.referrer === 'https://www.google.co.jp/') alert('google!');
sessionStorage.setItem("visited", visitedTimes + 1)

Comments

[natsumi201]

ありがとうございます！
参考にさせていただきます。