jquery - 如何在顶部或代替内容 div 显示加载图像/div？

Question

我有以下 html 结构:

<div class="container">
  <div class="header"></div>
  <div class="sidebar"></div>
  <div class="content-loading"></div>
  <div class="content"></div>
  <div class="footer"></div>
</div>

和以下CSS:

.container {
    background: #FFFFFF;
    width: 627px;
    margin: 0 auto;
}
.header {
    background: #F7F7F7;
    border: 1px solid #A3B6C9;
    padding:1px 10px 10px 10px;
}

.sidebar {
    float: right;
    width: 167px;
    background: #F7F7F7;
    padding-bottom: 10px;
    text-align: center;
    padding-top: 10px;
}
.content {
    padding: 10px 0;
    width: 460px;
    float: right;
}

.content-loading  { 
  background: white url('/images/loadingIndicator_2.gif') center center no-repeat; 
}

当加载 ajax 时，我需要在 content div 的中心显示该图像 (loadingIndicator_2.gif):

  $.ajax({
      beforeSend: function(){
          $( ".content-loading" ).show();                      
      },
      complete: function(){
          $( ".content-loading" ).hide();
      }                  
  });

但是图片没有居中。看来我需要选择其他方法(可能不使用 content-loading div？)。

Answer 1

添加到css类.content-loading

position: absolute;
width: 100%;
height: 100%;

另见我的 jsfiddle .

===更新===

在此jsfiddle .content-loading 在 .container 之上。
Here仅在 .content 上。

如果你也想看到内容，将white替换成transparent。