ローディングをキャッシュで制御する方法
ウェブサイトのローディングアニメーションは、ユーザーエクスペリエンスの一環として非常に重要です。
ただし、毎回表示されるとユーザーにとって煩わしい場合もあります。
そのため、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
を活用したシンプルなキャッシュ制御で、
ウェブサイトの利便性を高めてみてはいかがでしょうか?
ぜひ、コードを参考にして実装してみてください!
複数の画像を個別に切り替える方法
2月 12, 2025独自のマウスカーソルを作成してウェブページを魅力的に!
1月 12, 2025JavaScriptでスクロールに応じて要素を表示・非表示する方法
12月 17, 2024