Hiding page loading

Question

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:

first ugly draft of page (for 1-2 seconds)
appears loading div
loading whole content
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).

Mark Kramer · Accepted Answer · 2011-09-28T03:15:56.333

4

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

edited Sep 28 '11 at 03:15

answered Sep 28 '11 at 01:40

Mark Kramer

3,134
7
34
52

thx for trying to help. But result is the same. clear your cache and try to refresh given page – Tural Ali Sep 28 '11 at 01:47
Ok. i did it. Please clear cache and reload given page. Everything right, but, loading animation ends fast. It must fade out after full page load. But it ends while loading – Tural Ali Sep 28 '11 at 02:17
Okay, it's done, now it will work perfectly. Your content will be hidden when you load the page. When it is done loading, image will fade out and your site content will display. Just check my edit. – Mark Kramer Sep 28 '11 at 02:30
read attentively my last comment. loading animation ends long before It must fade out. it ends while loading but must fade out after full page load – Tural Ali Sep 28 '11 at 02:38
I already fixed that. I changed it so it doesn't do that any more. Now the animation to fade the loading bar only runs when the document is ready – Mark Kramer Sep 28 '11 at 03:08
I found the bug. You need to use $(window).load(function(){ }); instead of $(document).ready(function(){ }); – Tural Ali Sep 28 '11 at 03:13
Yeah, you're right, I looked it up and that is a better option. I'll change my answer so you can accept it. – Mark Kramer Sep 28 '11 at 03:15

score 3 · Answer 2 · answered Sep 28 '11 at 01:51

3

Try moving the styles for loading to be inline instead of relying on the full external css file to load. If you look at Google Chrome Developer Tools and the Network tab, or a similar tool, you'll see the content of the page loads first, as expected, but then you have to wait until the external css is loaded and downloaded, and then the referenced image in the css file is loaded. Placing the style inline should assist in getting the loading element to display as soon as it can, or at least sooner.

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

answered Sep 28 '11 at 01:51

Doozer Blake

7,677
2
29
40

result is the same. clear your cache and try to refresh given page – Tural Ali Sep 28 '11 at 01:56
@L0rdDEVdem0rt Yes, I can see not a lot has changed. Have you considered hiding the main content so it doesn't flicker like it does? The background image is now loading quicker in the timeline with it being inline, but it appears other elements are loading in as well. Having the main content not displayed inline until it's loaded may help. Just an idea. – Doozer Blake Sep 28 '11 at 02:02
Ok. i did it. Please clear cache and reload given page. Everything right, but, loading animation ends fast. It must fade out after full page load. But it ends while loading – Tural Ali Sep 28 '11 at 02:18

score 1 · Answer 3 · answered Sep 28 '11 at 02:00

1

Why not start everything else inside a <div style="display: none;" id="loaded">, and then when the loading has finished use $("#loaded").fadeIn()?

answered Sep 28 '11 at 02:00

Timothy Jones

21,495
6
60
90

First, because i'm going to implement "sticky footer". http://www.cssstickyfooter.com/ Grouping all divs within new one will mess things. Second, it's not good idea, because page will not load if client browser doesn't support js – Tural Ali Sep 28 '11 at 02:03
1

@L0rdDEVdem0rt if client script doesn't work, you'll have bigger problems because the loading screen will be on top of everything. If you're going down the path, go all in. – Doozer Blake Sep 28 '11 at 02:05
Ok. And what about stick footer? – Tural Ali Sep 28 '11 at 02:06
@L0rdDEVdem0rt if it can't be wrapped in a single div, then just call .fadeIn() on all elements that have to be shown on load, so $("#loaded").fadeIn(); $("#footer").fadeIn(); or something along those lines. – Doozer Blake Sep 28 '11 at 02:10
Ok. i did it. Please clear cache and reload given page. Everything right, but, loading animation ends fast. It must fade out after full page load. But it ends while loading – Tural Ali Sep 28 '11 at 02:16

Hiding page loading

3 Answers3

Linked

Related