以下を使用して、読み込みに時間がかかる場合の読み込みイメージを表示しています。
<div class="divLoading"></div>
JS:
$("body").on({
ajaxStart: function () {
$(this).addClass("loading");
},
ajaxStop: function () {
$(this).removeClass("loading");
}
});
CSS
.divLoading {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 )
url('../../Images/ajax-loader.gif')
50% 50%
no-repeat;
}
body.loading {
overflow: hidden;
}
body.loading .divLoading {
display: block;
}
しかし、これはページが初めて読み込まれたときに機能しません。サイトにログインするとすぐに、ページのコンテンツが完全に読み込まれるまで、この読み込みイメージを表示したいと考えています。ありがとう。