Question

我的HTML标记看起来像那样

<html>
<body>
<div id="loading"><img src="core/design/img/load/load.gif" /></div>
<div id="wrap"></div>
<div id="footer"></div>
</body>
</html>

我正试图通过以下解决方案隐藏整页加载过程。

CSS规则：

#loading {
    position:fixed; 
    left:0; 
    top:0; 
    width:100%; 
    height:100%;
    background-image:url("img/load/tr.png"); 
    z-index:100;
}
#loading img {position: absolute; margin-left:-110px; margin-top:-9px; left:50%; top:50%}

和Jquery

$(document).ready(function(){
$('#loading').fadeOut(500);
});

现在，问题是这样的页面加载：

第一页丑陋的草稿（1-2秒）
出现加载div
加载整个内容
消失加载div

You can see it in action

我不明白为什么在1-2秒后出现加载div？

我想阻止1）。

Answer 1

我认为这很简单。

首先确保在您的部分中调用jQuery。

首先，在名为

的div中包装页面的所有内容（加载div除外）

<div id="content-wrapper">
    CONTENT HERE
</div>

然后使用CSS set：

#content-wrapper {
    visibility:hidden;
}

然后将jQuery变成这样的函数：

$(window).load(function(){

    document.getElementById("content-wrapper").style.visibility="hidden";

    $('#loading').fadeOut(500, function() 
    {
        document.getElementById("content-wrapper").style.visibility="visible";
    });
});

我可以看到你正在使用Nivo Slider。我也是;）

编辑：我修好了，现在它完美无缺。（您不再需要身体标签中的onload事件了）

点击此处的示例：JSFiddle

Answer 2

尝试将加载样式移动到内联，而不是依赖要加载的完整外部css文件。如果您查看Google Chrome开发者工具和网络标签或类似工具，您会看到页面内容首先按预期加载，但您必须等到外部css加载和下载，然后加载了css文件中引用的图像。将样式内联放置应该有助于尽快或至少更快地显示加载元素。

<div id="loading" style="position: fixed;left: 0;top: 0;
 width: 100%;height: 100%;background-image: url(core/design/img/load/tr.png);z-index: 100;"><img src="core/design/img/load/load.gif"></div>

Answer 3

为什么不在<div style="display: none;" id="loaded">内启动其他内容，然后在加载完成后使用$("#loaded").fadeIn()？

隐藏页面加载

3 个答案: