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时在loadingIndicator_2.gif div的中心显示该图像（content）：

  $.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。

=== UPDATE ===

在jsfiddle .content-loading中.container超过了.content Here仅white。

如果您也想查看内容，请将transparent替换为{{1}}。

Answer 2

我建议使用单独的标签而不仅仅是“背景：”

尝试：

background-color: white;
background-image: url('/images/loadingIndicator_2.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;

如果这不起作用，请将您的代码放在jsfiddle中，我会帮助您更多。

注意背景附件：固定;该职位需要在Opera和Firefox中正常运作。

Answer 3

使用spin.js。

示例代码：

var opts = {
  lines: 13, // The number of lines to draw
  length: 20, // The length of each line
  width: 10, // The line thickness
  radius: 30, // The radius of the inner circle
  corners: 1, // Corner roundness (0..1)
  rotate: 0, // The rotation offset
  direction: 1, // 1: clockwise, -1: counterclockwise
  color: '#000', // #rgb or #rrggbb or array of colors
  speed: 1, // Rounds per second
  trail: 60, // Afterglow percentage
  shadow: false, // Whether to render a shadow
  hwaccel: false, // Whether to use hardware acceleration
  className: 'spinner', // The CSS class to assign to the spinner
  zIndex: 2e9, // The z-index (defaults to 2000000000)
  top: '50%', // Top position relative to parent
  left: '50%' // Left position relative to parent
};

var target = document.getElementById('foo'); //put your target here!
var spinner = new Spinner(opts).spin(target);

只需要1 tiny js file。没有图片

将其关闭：

spinner.stop();

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

3 个答案: