隐藏页面加载

我的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）第一页的丑陋草案（1-2秒） 2）出现加载div 3）加载全部内容 3）消失加载div

You can see it in action

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

我想阻止1）。请帮我解决这个问题。 Thx提前

来源

2011-09-28 Tural Ali

我认为这是一个非常简单的。

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

#content-wrapper { 
    visibility:hidden; 
}

接下来，只要jQuery的成一个函数：

首先，包装你页面的所有内容（除了装载格）在一个div然后使用CSS一套名为

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

像这样：

$(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

来源

2011-09-28 01:40:24

thx试图帮助。但结果是一样的。清除缓存并尝试刷新给定的页面 –

好吧，我有另一种方法，然后给我一秒钟。 –

让我测试一下，检查我的编辑 –

尝试将样式加载到内联，而不是依赖于完整的外部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>

来源

2011-09-28 01:51:54

结果是一样的。清除缓存并尝试刷新给定页面 –

@ L0rdDEVdem0rt是的，我可以看到没有太多变化。你有没有考虑隐藏主要内容，以免它闪烁？背景图片现在在时间轴中加载的速度更快，并且它也是内嵌的，但它似乎也加载了其他元素。在加载主要内容之前，不要直接显示内容可能会有所帮助。只是一个想法。 –

好的。我做的。请清除缓存并重新载入给定页面。一切正常，但加载动画结束得很快。整页加载后它必须淡出。但它在加载时结束 –

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

来源

2011-09-28 02:00:18

首先，因为我要实现“粘脚”。 http://www.cssstickyfooter.com/将所有div分组到新的分区中会使事情变得糟糕。其次，这不是个好主意，因为如果客户端脚本不起作用，客户端浏览器不支持js –

@ L0rdDEVdem0rt，那么将会出现更大的问题，因为加载屏幕将处于最佳状态。如果你要走的道路，全力以赴。 –

好的。那么棒脚是什么？ –

隐藏页面加载

回答

相关问题