ローディング画面について
実現したいこと
トップページのローディング画面について質問させてください。
現在、トップページにローディングを実装しています。
なお、ホームページ内のページ遷移からトップページ表示時は、ローディングを非表示にしています。
クライアント様から、検索画面→トップページ表示→検索画面に戻る→再度トップページ表示した際に、ローディングを表示したいとのご要望があり、試行錯誤しているところです。
ちなみに、’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';
});
お礼
とても丁寧な解説ありがとうございます。 良く理解できました！！