CODEWITHSUNDEEP
javascript
Mike
Mike

Reputation: 1863

Message on loading

This is a crossbrowser window.onload script, I want to add a message, when the page loads (<div id="message">Loading, please wait</div>), and it must disappear when page finished loading. How can I do that? Please help.

function init() {
    if (arguments.callee.done) return;
    arguments.callee.done = true;
};

if (document.addEventListener) {
    document.addEventListener("DOMContentLoaded", init, false);
}

/*@cc_on @*/
/*@if (@_win32)
document.write("<script id=\"__ie_onload\" defer=\"defer\" src=\"javascript:void(0)\"><\/script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
    if (this.readyState == "complete") {
    init();
    }
};
/*@end @*/

if (/WebKit/i.test(navigator.userAgent)) {
    var _timer = setInterval(function() {
    if (/loaded|complete/.test(document.readyState)) {
        clearInterval(_timer);
        init();
    }
    }, 10);
}

window.onload = init;

Upvotes: 0

Views: 1253

Answers (3)

PatrikAkerstrand
PatrikAkerstrand

Reputation: 45721

The easiest way is to have a div in the DOM that you hide on the load event:

<html>
    <body>
        <div id="loading">The page is loading, please wait</div>
        [...]

        <script>
            window.onload = function () {
                document.getElementById('loading').style.display = "none";
            }
        </script>
    </body>
</html>

To ensure that this always works, even when the user has JavaScript disabled:

<html>
    <body>
        <script>
            document.write('<div id="loading">The page is loading, please wait</div>');
        </script>
        [...]
        <script>
            window.onload = function () {
                document.getElementById('loading').style.display = "none";
            }
        </script>
    </body>
</html>

Upvotes: 2

Ropstah
Ropstah

Reputation: 17794

Just load the page with the loading DIV visible from the beginning. Hide it at the end of the init function...?

Upvotes: 2

Fabien M&#233;nager
Fabien M&#233;nager

Reputation: 140205

The event you are catching is the one triggered when the DOM has finished loading, the next step in the loading is the body.onload (when all the images and body scripts are loaded).

init(); // show the div

window.onload = function(){
    // finished loading, hide the div
}

Upvotes: 1

Related Questions