私はjquery ajaxを使用してgif
います.ajaxが動作しているときにローダーイメージを表示したいです。ローダーは正しく表示されますが、ローダーが表示されている間にユーザーがウィンドウをスクロールまたはサイズ変更すると、ローダーが画面から移動したり、サイズが変化したりします。ユーザーがスクロールしてもビューから消えないように、ローダーを全画面表示に固定してほしい。
ここにjqueryの私のコードがあります
jQuery.ajaxSetup({
beforeSend: function() {
$('#loader').show();
},
complete: function(){
$('#loader').hide();
},
success: function() {}
});
これがCSS
ローダーとその内部divです
<style>
#loader
{
background-color: #e8e8e8;
width: 100%;
height: auto;
bottom: 0px;
top: 0px;
left: 0;
position: absolute;
opacity: 0.5;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
display:none;
}
#center {
position: absolute;
width: 100px;
height: 50px;
top: 50%;
left: 50%;
margin-top: -25px; // margin is -0.5 * dimension
margin-left: -50px;
z-index:5;
}
</style>
そしてhtmlは次のとおりです
<div id="loader" >
<div id="center">
<img src="images/loading.gif" />
<div>
</div>