Preload and run jQuery/javascript before viewing the page

Question

I'm working on a project where there's quite a lot of jQuery going on. So when I go to the page, I can see the jQuery running (e.g. $.button() elements on the page still appear as normal html elements before jQueryUI is loaded :S) so initially it looks all ugly THEN, once all the JS is loaded and executed, it looks "nice".

It's not just a case of preloading images or whatever, I want to RUN the jQuery code, but "hide" it from visitors so that once the page is opened, it looks "nice" straight away OR displays a black screen saying "Loading..." until the jQuery has finished running.

Take a look here: http://www.filamentgroup.com/ , though I'm not sure that actually runs the site's javascript before displaying it, but it shows the basic idea of having a dark screen saying "Loading...".. I suspect that's what happens in large web apps such as SlideRocket though it does use flash... :S

Answer 1

You answered the question yourself. Have some kind of loading screen that hides the page until all of the jQuery is run.

Try something like the following.

This goes at the top of your page:

<div id="loadingMask" style="width: 100%; height: 100%; position: fixed; background: #fff;">Loading...</div>

Here's your jQuery:

$(document).ready( function() {

    /*
     * ... all of your jQuery ...
     */

    // At the bottom of your jQuery code, put this:
    $('#loadingMask').fadeOut();
});

Answer 2

Wrap all of your jQuery that you want "preloaded" into this :

$(window).load(function() {
    //Your jQuery here
});

or alternatively, not all of your jQuery code inside of that wrapper. Rather, put your jQuery DOM changes into a

$(document).ready(function(){
    //jQuery
}))

and then have a wrapper for all your site content.

<div id="everything-wrapper">
    <!-- put your body here -->
</div>

and set the display to none in your CSS

#everything-wrapper {
    display : none;
}

and then with the window load like earlier

$(window).load(function() {
    $("#everything-wrapper").show();
    // or
    $("#everything-wrapper").fadeIn("fast");
    // to be fancy with it
});