Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
356 views
in Technique[技术] by (71.8m points)

javascript - Hiding page loading

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
  4. disappears loading div

You can see it in action

I don't understand why loading div appears after 1-2 seconds?

I want to prevent 1).

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...