Question

<div id="data_div">
    <!-- render content here, might take a while... -->
</div>
<div id="loading_div" style="background-color:cyan" >
    Loading, please wait...
</div>

我希望“loading_div”重叠“data_div”以创建加载正在进行的效果，而实际发生的是内容已经在后台呈现。文档准备好后，我可以做类似的事情

$(document).ready(function () {
    $("#loading_div").hide();
}

如何使用CSS和/或JQuery实现这一点？

Answer 1

对于#loading_div，假设它不在包装器或其他东西中（并且最好在 #data_div上面代码）：

#loading_div {
margin: 10%;
width: 80%;
height: 50%;
text-align: center;
opacity: 0.8;
z-index: 99;
background: black;
color: white;
display: block;
position: absolute;
padding-top: 30%;
}

#data_div {
 z-index: 0;   
    text-align: center;
}

修改品味...

http://jsfiddle.net/H2WWx/

Answer 2

只需将加载div放在数据div的顶部即可。您可以通过设置：

来完成此操作

#loading_div {
position: relative;
top: xx;
left: xx;
}

其中top和left属性具有移动加载div以覆盖数据div所需的必要值。

Answer 3

你有正确的想法。首先，您需要使用CSS定位将load_div放在data_div上。

其次，你会想要使用$（window）.load（）;等待所有资源，脚本和图像加载。 $（document）.ready（）在DOM准备好之前触发，就在此之前。

这是一个使用jQuery将加载div放在内容上的示例。使用jQuery的一个好处是它是一个渐进增强，这意味着它对非js设备是安全的：

http://jsfiddle.net/eAfHm/

Answer 4

我会使用$（window）.load（）;而不是准备好，这将等到真正一切都完成。

 #loading_div{
     position: absolute;
     width: 100%;
     height:100%;
     z-index: 9999;
 }

Answer 5

这可能会有所帮助：http://jsfiddle.net/SQHgu/11/，但不允许跨域请求（例如）。

Answer 6

为什么在互联网上有一个很棒的自动预加载器时自己制作代码： http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/

我使用这个预加载器非常多。漂亮的动画，它的工作crossbrowser。您可以轻松编辑CSS，并且实现起来很简单。

重叠<div> </div>

6 个答案: