28

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

Improve this question

5 Answers 5

Reset to default
43

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

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...
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? :)
@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.
@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. :-)
True, true, but your reply still answers the topic best imo. Thanks for your time :)
7

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.

  1. 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

  2. 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

  3. 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.

Improve this answer

1 Comment

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.
5

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?

Improve this answer

6 Comments

Yeah then this will create a jump when the script executes.
A jump, sir? Could you please elaborate on that?
Will using visibility:hidden actually make it faster since when the display property is set to inline or block, the DOM tree has to be recreated ? I know this is unneeded optimization, but just out of curiosity.
I would say display:none should be faster. Visibility hidden still has to render things, regardless of whether they're visible, still those elements still occupy a visible space. No point in doing that before absolutely necessary. I'd stick to display:none/block; for this.
This is a very funny solution, I'm going to try it!
|
-2

Remove a css before rendering the page:

(I use this for removing a Css highlighting from a table, and WORKS!)

<script type="text/javascript">

    function removeHighlight(){
        var elm = $("#form_show\\:tbl_items tr");
        elm.removeClass('ui-state-highlight');
    }

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

</script>
Improve this answer

1 Comment

This would not run until the document is ready.. The asker wants the code to run before the page begins to display.
-12

Put your code in document ready. Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded

$(function(){
 your code goes here...
});

Or 

$(document).ready(function(){
 your code goes here..
});
Improve this answer

5 Comments

Actually, this will wait until the whole page is rendered, thus create a delay in changing the elements in question.
Yes exactly, it will give OP what he wants
I read the question totally the other way. "I want to run some jquery code before my page have loaded"
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
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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.