Preload and run jQuery/javascript before viewing the page

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.filamentgro开发者_开发问答up.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

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();
});

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
});

I was having a similar issue with an artifact popping up briefly during page loads in IE8. The solution I used was to change the visibility of the container to hidden at line 1 of the css. Then showed the element at the end of the jquery file. If the css and jquery start arguing, the element isn't shown until the argument is resolved.

I would have a overlay as part of your static CSS and HTML, then when JQuery loads via

$(document).ready() you can hide the overlay

The answer by Christopher is most likely the way FilamentGroup do it. You can have javascript "preloaded", it loads inline with the rest of the page, and due to it usually being larger than the rest of the page takes longer to download. You can't make javascript load first, that's not the way it works.

However, the principle to make it work is to "hide" your page from view in CSS (or with inline styles as the CSS will still have to load) then once everything is ready in javascript show it all again. If you notice there is a gap between the page displaying (nothing) and the javascript loading showing on FilamentGroup. That is because they hide the page, the javascript loader loads, then once the rest of the javascript has finished it hides the loader and shows the page.

Dude, I did you up a sample. I hope you likes. I use something like this on my own site. http://jsfiddle.net/jMVVf/