Question

我正在使用jquery ajax，我希望在ajax工作时显示loader gif图像。加载器正确显示，但是当用户在加载器显示时滚动或调整窗口大小，加载器移出屏幕或改变大小。我希望装载程序全屏固定，这样即使用户滚动，它也不会从视图中消失。

这是我的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>

在这里，您可以查看my test page

Answer 1

这就是我使用你的标记在水平和垂直方向粗略地居中加载器图像的方法。

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:absolute替换为position:fixed，您应该能够达到预期的效果：

http://jsbin.com/owaciy/3

滚动时ajax loader div不会出现在全屏幕上

1 个答案: