【JavaScript】jQueryで初回アクセス時のみローディングを表示させる方法

今回は、JavaScriptの小ネタです。
jQueryで初回アクセス時のみローディングを表示させる方法をご紹介します。

初回アクセスか2回目以降かを判定

まず、ページを訪問したユーザーが、初回アクセスか2回目以降かを判定する必要があります。
jQueryで以下のように記述します。

$(function () {
    var webStorage = function () {
        if (sessionStorage.getItem('access')) {
            // 2回目以降のアクセス
        } else {
            // 初回アクセス
            sessionStorage.setItem('access', 'true'); // sessionStorageに保存
        }
    }
    webStorage();
});

if文で「sessionStorage」にデータがあるかどうかで判定しています。

初回アクセス時は「sessionStorage」にデータがないので、elseの中が実行され、ここで「sessionStorage」に「access」というデータを保存しています。

2回目以降は「sessionStorage」に「access」というデータが保存されていることになるので、ifの中が実行されます。

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

上記を使って、初回アクセス時のみローディングを表示させるコードを書いてみます。

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

初回アクセス時は、setTimeoutを使って3秒後に「#loading」が非表示されます。
2回目以降は、アクセス後すぐに「#loading」が非表示されます。

htmlとcssは以下になります。

<div id="loading"></div>

#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #fff;
    z-index: 100;
}

真っ白で何もないスタイルですが、ローディング用の画像などを付け足して、ローディングを作ることができると思います。

最後に

以上、jQueryで初回アクセス時のみローディングを表示させる方法をご紹介しました。

初回アクセスか2回目以降かの判定は、ローディング以外にも使える場面が多いので、覚えておくと便利です。

他にも小ネタがあれば書こうと思います。