views:

59

answers:

4

hi guys I wanted to know, is there a way to not display my webs content scattered before the jquery document ready is finished? I saw it on a site somewhere and I cannot find it now, forgot to bookmark the site. Does anyone have a clue?

A: 

Put a class on the elements you want to hide. Set this class to be hidden. On "document ready" change it to visible.

marcgg
A: 

$(document).ready fired when DOM is loaded. But browser starts rendering before DOM completed.

Have a look at answers for this question

Note that if javascript was disabled by user(or if an unhandled error occured while loading) you will unable to show hidden elements back(and even request to enable javascript in case if you hide body)

Trickster
+2  A: 
<body id="sameName" style="display: none">

and

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

or

<body id="sameName" style="visibility: hidden">

and

$(document).ready(function(){
    $("#sameName").attr('style', 'visible: show');
});
Cesar
Isn't setting a style of display:none discouraged? Is visibility the preferred method?
spig
Edited =] Thank you.
Cesar
When you set display:none on an element, the page is rendered as if the element were not present at all. If you set visibility:hidden, the page renders as it would if the element were visible, but the element and its contents are not rendered. This leaves a blank space on the page at the element's position. If you set this on the body, the visual effect should be about the same.
Annabelle
thanks, this works fine.
Eagletrophy
A: 

Looks like your elements class should have a class that has

visibility: hidden;

Then when your document is loaded you can call show() on the element you want to have displayed.

spig