0

私は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>

ここで私のテストページを確認できます

4

1 に答える 1

2

これは、マークアップを使用してローダー画像を水平方向と垂直方向の両方で大まかに中央に配置する方法です。

body { 
     height:100%;
     margin:0;
     padding:0;
}

#center {
     width: 300px;
     height: 200px;
     position: absolute;
     top: 40%;
     left: 0px;
     width: 100%;
}

#loader {
     background-color: red;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
     opacity: 0.5;
     filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
​

結果を示す jsbin を次に示します。

http://jsbin.com/owaciy/2/

** アップデート **

に置き換えるposition:absoluteposition:fixed、目的の結果が得られるはずです。

http://jsbin.com/owaciy/3

于 2012-08-15T05:14:31.647 に答える