The page loading animation for hiding whole page load process ends long before It must fade out [duplicate]_问答_开发者

The page loading animation for hiding whole page load process ends long before It must fade out [duplicate]

开发者 https://www.devze.com 2023-04-09 11:13 出处：网络

This question already has answers here: Closed 11 years ago. Po开发者_如何学编程ssible 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);
    });
});