ローディングをキャッシュで制御する方法

Posted on by

ウェブサイトのローディングアニメーションは、ユーザーエクスペリエンスの一環として非常に重要です。
ただし、毎回表示されるとユーザーにとって煩わしい場合もあります。
そのため、1日1回だけローディングを表示し、それ以降は表示しないように制御する方法を紹介します。
この方法では、ブラウザの localStorage を利用して、キャッシュを使った制御を実現します。

実装方法

以下は、ローディングアニメーションを1日1回だけ表示するコード例です。

HTML部分

<div id="loader">
    <div class="loader-slide">Loading...</div>
</div>

JavaScript部分

$(window).on('load', function () {
    // ローディング表示を制御するキー
    const loaderKey = 'lastLoadingTime';
    const currentTime = new Date().getTime(); // 現在の時間（ミリ秒）

    // 保存された最後のローディング時間を取得
    const lastLoadingTime = localStorage.getItem(loaderKey);

    // 最後のローディング時間が存在しない、または1日以上経過している場合にローディングを表示
    if (!lastLoadingTime || currentTime - lastLoadingTime > 24 * 60 * 60 * 1000) {
        $('.loader-slide').addClass('open');
        setTimeout(function () {
            $('#loader').remove();
            // 現在の時間を保存
            localStorage.setItem(loaderKey, currentTime);
        }, 2000);
    } else {
        // ローディングをスキップ
        $('#loader').remove();
    }
});

コードの説明

ローディング表示の制御

localStorage を使用して、最後にローディングが実行された時間を記録します。

現在時刻と保存時刻の比較

現在の時間を取得し、localStorage に保存されている時間と比較します。
24時間（86,400,000ミリ秒）以上経過している場合にのみ、ローディングを表示します。

ローディングのスキップ

1日以内に再訪問した場合はローディングをスキップし、ページを直接表示します。

注意点

localStorage の特性

localStorage はブラウザごとに保存されるため、同じユーザーが別のブラウザやプライベートモードで訪問した場合には、ローディングが再度表示されます。

デバッグ時のローカルストレージの確認

開発者ツールで localStorage のキーや値を確認できます。キー lastLoadingTime に保存された値を削除することで、動作を再確認できます。

実装の利点

ユーザーエクスペリエンスの向上

毎回ローディングが表示されないため、再訪問時の待ち時間が短縮されます。

効率的なリソース管理

ローディングアニメーションを制御することで、不要なリソースの消費を抑えられます

まとめ

今回の方法を用いることで、ローディングアニメーションを効果的に制御し、
ユーザーエクスペリエンスを向上させることができます。
localStorage を活用したシンプルなキャッシュ制御で、
ウェブサイトの利便性を高めてみてはいかがでしょうか？

ぜひ、コードを参考にして実装してみてください！