The page loading animation for hiding whole page load process ends long before It must fade out [duplicate]
This question already has answers here:
Closed 11 years ago.
Po开发者_如何学编程ssible Duplicate:
Hiding page loading
I'm using loading animation for hiding whole page load process. but it ends long before It must fade out. it ends while loading but must fade out after full page load
Here is the js
$(document).ready(function(){
$('#loading').fadeOut(600, function()
{
$("#wrap").fadeIn(1000);
$("#footer").fadeIn(1000);
});
});
HTML markup
<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%}
You can see it in action
You need to use $(window).load(function(){ }); instead of $(document).ready(function(){ });
More info: $(document).ready vs. $(window).load
For users with javascript disabled:
$(document).ready(function(){
$('body').append('<div id="loading"><img src="core/design/img/load/load.gif" /></div>');
});
$(window).load(function(){
$('#loading').fadeOut(600, function(){
$("#wrap").fadeIn(1000);
$("#footer").fadeIn(1000);
});
});
加载中,请稍侯......
精彩评论