Applying layer of JS before the HTML loads

I have a .html loade开发者_Python百科d to clients. On it, jQuery does some modifications.

The problem is that the page loads in two steps: first the original .html, then, a fraction of a second later, the modified .html.

This approach causes jerkyness. Is there a way to show the .html only once JavaScript has acted upon it?

If you MUST do this, then something like this:

Javascript:

$(document).ready(function(){
    myfunction();
    $("#wrapper").show();
}

CSS:

div#wrapper{ display: none; }

HTML:

<div id="wrapper">
  <!-- my page stuff that i dont want to be jerky -->
</div>

However, I would raelly advise that you find a way to apply the styles/data to the page before you generate it (e.g. with PHP, ASP etc.),

You can use CSS to set default properties of the parts you are changing, if these are stylistic changes and not HTML changes.

You can also use jQuery's .load() to reload page fragments instead of the whole page.

Or, use css to set body { display: none; } and using (document).ready() to $('body').show().