Load javascript before rendering page?

92,074

Solution 1

I want to run some jquery code before my page have loaded.

This is easily done; it's funny because much of the time, people are trying to do it the other way around.

When the browser encounters a script tag, barring your using a couple of special attributes (and the browser supporting them), all processing of the page comes to a screeching halt and the browser hands the script to the JavaScript engine. Only when the script completes does processing of the page continue.

So if you have a script tag in the head section of your page, you can output CSS classes via the document.write function:

<DOCTYPE html>
<html>
<head><title>Foo</title>
<script src='jquery.js'></script>
<script>
if (some_condition) {
    document.write("<style>foo { color: blue; }</style>");
}
else {
    document.write("<style>foo { color: red; }</style>");
}
</script>

Note that some_condition in the above can only rely on, and refer to, the items above it in the document (since the browser hasn't done anything with the rest of the document yet, as it's waiting to see what document.write content the script is going to output).

Live example (refresh it a few times, half the time it's red, half the time it's blue). It doesn't use jQuery, but you get the idea.

Solution 2

Basically it's a similar problem as to implementing a loader/spinner. You show the animated gif to the user, and when the page finalizes loading, then you remove it.
In this case, instead of showing a gif, we show blank.

There are various ways of accomplishing this result. Here are few ordered in terms of ease and performance.

Global CSS rule.
Hide the body on your global CSS file.

body { display:none; }

And once the document finishes loading, toggle the display:

// Use 'load' instead of 'ready' cause the former will execute after DOM, CSS, JS, Images are done loading
$(window).load(function(){
  $(body).show();
});

Demo

Cover page with div layer
Hide the content with a div sitting on top of the page and remove it later.

div#page_loader {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background-color: white;
   z-index: 100;
}

Demo

JavaScript snippet
Hide the body before the page renders:
```
<body onload="document.body.style.display='none';">
```
Demo

If you use Modernizr, you could also leverage its CSS classes to hide/show the content depending on the user's device or browser.

What I wouldn't recommend though, it's running jQuery scripts at the top of the page, cause that's going to add extra burden, and delay even further page rendering.

Solution 3

Assuming you're already using the onLoad event on body or using the jQuery ready callback, you could start with style="display:none;" on your root div, do your JS stuff and finally set "display:block" on that div when you're ready to expose the content. Voila?

92,074

fille

Updated on July 09, 2022

Comments

fille almost 2 years

I want to run some jquery code before my page have loaded. Im adding some classes which are changing the css with javascript, and when the page loads i see the "old" css for a short time. Any ideas? Thanks
Marko about 13 years

Actually, this will wait until the whole page is rendered, thus create a delay in changing the elements in question.
Hussein about 13 years

Yes exactly, it will give OP what he wants
T.J. Crowder about 13 years

I read the question totally the other way. "I want to run some jquery code before my page have loaded"
Hussein about 13 years

I think you are misunderstanding the question, how can you run any code if you dont' have any elements in DOM yet. I believe Document ready is what he is looking for
T.J. Crowder about 13 years

You can run code to do exactly what he says, adding classes to the CSS being used by the page. Again, the word "before" is pretty clear.
T.J. Crowder about 13 years

I should add: You haven't mentioned the design constraints that lead you to needing to do this, and I'm sure there could be / are some situations where it's unavoidable. But I'd tend to think that 9 out of 10 times, stepping back and looking again at the actual design problem could yield a solution that doesn't rely on running JavaScript to tailor the CSS. Not the 10th time, perhaps, but certainly the first nine...
fille about 13 years

Thanks, nice with an example as well :) I did it another way though, as some of the ppl mentioned above: display: none on my page, do the jquery stuff -> display: block on the page. Is it ok to do it like this, or is your sulotion better? :)
T.J. Crowder about 13 years

@fille: "Better" is a highly subjective term. Which solution you choose will depend on what you're trying to accomplish. If you use display: none and allow all the elements to be built up before the page is shown to the user, you have the advantage of being able to operate on those elements directly, but the disadvantage of causing a perceived page load delay (browsers display pages as they're being parsed). So if you can avoid that, I would, but there are almost certainly times when it's what you want -- not for the whole page, but for parts of it, sure.
T.J. Crowder about 13 years

@fille: Not complaining, but if you've decided that @Lior's solution is the best way to solve your problem, it's probably appropriate to mark that as the accepted answer rather than mine. It's totally your call, it's just, you did say you were going the other way. :-)
fille about 13 years

True, true, but your reply still answers the topic best imo. Thanks for your time :)
VictorKilo over 11 years

This would not run until the document is ready.. The asker wants the code to run before the page begins to display.
Oriol about 8 years

For progressive enhancement concerns, you could set this rule: .no-js body { display: block !important; }. This way if JavaScript isn't activated the page would still display.