CODEWITHSUNDEEP
javascriptjquery
DarkLeafyGreen
DarkLeafyGreen

Reputation: 70416

Show loading while document is not ready

I want to show the user that the document which he wants to access is loading and not ready yet.

I want to show the web-page when it is fully loaded.

I use 

$(document).ready(function(){});

for document ready. What should I do for my approach?

Upvotes: 2

Views: 8221

Answers (2)

T.J. Crowder
T.J. Crowder

Reputation: 1074238

The first thing to do is ask why the page is so slow to load that you feel you need a loading banner, and to do whatever you can to fix that.

If you can't fix that because of the nature of the page in question, the next consideration is making sure that the "Loading" banner only appears for people who have JavaScript enabled (because we're going to remove it later with JavaScript, so it would be a bit mean to put it there and then not remove it if they don't have JavaScript). This may be one of the few valid remaining uses of the document.write statement (and only if you're not using XHTML, because it's not valid in XHTML):

<body>
<script>
document.write("<p id='loading'>Loading...</p>");
</script>

...which you'd style with CSS, presumably:

#loading {
    position:         absolute;
    left:             0px;
    top:              0px;
    background-color: #ddd;
    /* ... */
}

And then in your ready handler, remove it:

$('#loading').remove();

If you're using XHTML (or you just don't want to use document.write on principle), you can do something similar without document.write, along the lines of:

<body>
<script>
    (function() {
        var p = document.createElement('p');
        p.id = 'loading';
        p.innerHTML = "Loading...";
        document.body.appendChild(p);
    })();
</script>

Live example (Tested on IE6/7/8 on Windows; Safari on Windows; and Chrome, Opera, and Firefox on Linux and Windows.)

Upvotes: 8

Sondre
Sondre

Reputation: 1898

Write some element with the loading text/animation at the start of the code, then remove or hide that element with javascript on document ready. Some output buffering might be needed to get the loading-message to show up right away.

$(function() {
    $("#loading_element").hide();
});

Upvotes: 2

Related Questions