jQuery覆盖加载条div

Question

我有一张数据表格，并且使用ajax获取数据。当正在获取数据时，表格中的数据会消失，出现一个小的loading圆圈。我希望数据保留（我知道如何做到这一点），同时在表格中央（不一定垂直，但至少水平）出现一个loading圆圈，伴随着一个半透明的背景，稍微遮挡住表格的视图（而不是整个网页）。如何让一个div出现在表格上方并实现这个效果？

- Matthew

Answer 1

[查看示例]

HTML

：是一种用于创建网页的标记语言。

<div id="overlay">
  <img src="http://www.sanbaldo.com/wordpress/wp-content/bigrotation2.gif" 
    id="img-load" />
</div>

CSS

#overlay { 
  display:none; 
  position:absolute; 
  background:#fff; 
}
#img-load { 
  position:absolute; 
}

Javascript

$t = $("#table"); // CHANGE it to the table's id you have

$("#overlay").css({
  opacity : 0.5,
  top     : $t.offset().top,
  width   : $t.outerWidth(),
  height  : $t.outerHeight()
});

$("#img-load").css({
  top  : ($t.height() / 2),
  left : ($t.width() / 2)
});

然后，当你要加载东西时，只需说：

$("#overlay").fadeIn();

完成后：

$("#overlay").fadeOut();

注意：加载图像按照要求在垂直和水平方向上居中显示。同时，只有表格会有覆盖层，而不是整个页面。

- gblazex

---

这对我不起作用。它没有封装我所覆盖的元素的整体（一个div），并在IE，Firefox，Chrome等浏览器中产生非常不同的结果。真可惜，因为它看起来是一个很好的方法！ - Amethi

$("#img-load").css({ top : (($t.height() / 2)-16), left : (($t.width() / 2)-16) }); 其中，16是尺寸的1/2（高度=宽度，因为gif图像是正方形）。 - sataniccrow

很棒的干净解决方案。谢谢分享！ - Hugo

非常好的简单解决方案。您可以通过在body标签末尾添加#overlay div来更全局地使用它。然后，在$("#overlay").css()中添加以下内容：left: $t.offset().left，最后为#overlay添加一个合理的z-index。 - PanPipes

Answer 2

只需使用jQuery的.html()方法将带有加载圆圈的新

注入包含表格的

中，然后使用CSS对其进行样式设置。可以为其提供不透明的背景图像，并相对或绝对定位加载圆圈。

假设你有：

<div id="table_container>
    <table>
        <tr>
            <td>something</td>
            <td>something</td>
        </tr>
    </table>
</div>

加载新数据时使用：

$('div#table_container').html('<div id="overlay"><img src="path/to/loading/img.png" class="loading_circle" alt="loading" /></div>');

并且将其样式设置为类似于：

#overlay {
    width: 100%;
    background: url('path/to/opaque/img.png') repeat;
    position: relative;
}

#overlay img.loading_circle {
    position: absolute;
    top: 50%;  // edit these values to give you
    left: 50%; // the positioning you're looking for.
}

- bimbom22

---

.html会删除"table_container"内的内容，因此请使用append。 - hardika

Answer 3

这对我有用，但唯一的问题是叠加层被向左移动了。

我在javascript中添加了一行代码，在Chrome、Firefox和Safari（Windows版）上完美运行。

$("#overlay").css({
  opacity : 0.5,
  top     : $t.offset().top,
  width   : $t.outerWidth(),
  height  : $t.outerHeight(),
  left    : $t.position().left // the fix.
});

- John N

Answer 4

嗯，你可以尝试使用CSS的position:absolute来实现加载圆圈。

- Puaka