隐藏页面加载 [英] Hiding page loading
问题描述
我的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;
剩下：0;
top：0;
宽度：100％;
身高：100％;
background-image：url（img / load / tr.png）;
z-index：100;
}
#loading img {position：absolute;保证金左：-110px;边距：-9px;左：50％; top：50％}
和Jquery
现在，问题出现在页面载入中：
1）第一页丑陋的草稿（1-2秒）
2）出现加载div
3）加载全部内容
3）消失加载div
我不明白为什么加载div会在1-2秒后出现？
我想阻止1）。请帮我解决这个问题。 Thx提前
我认为这是一个非常简单的方法。
<首先，请确保在您的部分中调用jQuery。首先，将所有页面内容（加载div除外）包装在一个名为的div中
< div id =content-wrapper>
内容此处
< / div>
然后使用CSS设置：
＃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。我也是;）
编辑：我修正了它，现在它完美地工作。 （你不需要在你的body标签中加载onload事件）
查看这里的例子： JSFiddle
My HTML markup looks like that
<html>
<body>
<div id="loading"><img src="core/design/img/load/load.gif" /></div>
<div id="wrap"></div>
<div id="footer"></div>
</body>
</html>
I'm trying to hide whole page loading process with following solution.
CSS Rules:
#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%}
And Jquery
$(document).ready(function(){
$('#loading').fadeOut(500);
});
Now, the problem is page loads like that:
1) first ugly draft of page (for 1-2 seconds) 2) appears loading div 3) loading whole content 3) disappears loading div
I don't understand why loading div appears after 1-2 seconds?
I want to prevent 1) . Please help me to fix that. Thx in advance
I think this is a pretty simple one.
First make sure jQuery is called in your section.
First, wrap all the content of your page (except the loading div) in a div called
<div id="content-wrapper">
CONTENT HERE
</div>
Then using CSS set:
#content-wrapper {
visibility:hidden;
}
Then just make the jQuery into a function like this:
$(window).load(function(){
document.getElementById("content-wrapper").style.visibility="hidden";
$('#loading').fadeOut(500, function()
{
document.getElementById("content-wrapper").style.visibility="visible";
});
});
and I can see you're using Nivo Slider. Me too ;)
Edit: I fixed it, now it works perfectly. (You don't need the onload event in your body tag anymore)
Check out the example here: JSFiddle
这篇关于隐藏页面加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
