jquery formatting only occurs when document ready, so when web page first loads the user is presented with an ugly page

This is only very briefly, while the loading o开发者_开发百科f elements and jsp includes occurs. However it is rather annoying.

Any tips to remove this ? To be more specific what is the css equivalent of hide() and show().

This is what css is there for, js (and jQuery) should be used for a behavioural layer, which impacts presentation but it shouldn't be the sole means by which you're making your page presentable.

The only suggestion I can make, beyond style the page with CSS, is to use some kind of mask

#cover {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0
    right: 0
    background: #fff url('path/to/loading.gif') 50% 50% no-repeat;
}

<div id="cover">
</div>

And then use:

$(window).load(
    function() {
        $('#cover').remove();
    }
);

But I think that's probably just compounding whatever errors you may already be making.

Use css to set the initial state of all the elements and only make changes after load with js/jquery. It doesn't seem like this could be any more inconvenient than coding the logic of formatting elements in js.

You'll always have this lag if js is used to create the initial state as it seems you've figured. Even highly optimised.

I guess the ugly solution would be to have js-snippets inline with html which formats elements as they're loaded by the browser. Please don't.

What the css equivalent of hide is dependent how your js shows it later, but generally display:none or visibility:hidden. Element can also be pushed off screen with negative positions as in position:absolute;left:-1000px;

You should make your HTML DOM smaller and simpler, so that it loads quicker.