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/

** 更新 **

By replacing position:absolute with position:fixed, you should be able to achieve the desired result:

http://jsbin.com/owaciy/3

于 2012-08-15T05:14:31.647 回答