HTML- Hiding Divs before page is loaded?

I have a HTML document where the b开发者_C百科ody contains dozens of divs, all listed sequentially. (It's a layout of small screenshots.)

The appearance and layout of each div is handled by CSS.

I wish to selectively hide some divs, depending on some state values. A javascript function "hideSomeDivs()" has been create to do this. (The function iterates over all divs, setting each element's style.display property to "none" as required.)

The problem: calling hideSomeDivs() function from will be too late: the page is already loaded and the visual changes will not be displayed. The original layout is maintained.

Q. how/where can I call this function such that the affected divs will be hidden, and all layout adjusted accordingly? Thanks.

Further information:

• apart from javascript interactivity, the page is static (i.e. there's no server-side processing available).

• also, I'm trying to avoid any "pop" where elements are shown/hidden after the page is loaded and drawn to the window.

• also, I need for the layout to be re-evaluated and re-drawn. e.g. if I hide divs 1 to 4, but show div 5, then div 5 should appear at the top of the page.

Think about it the other way round - hide all your divs by default, and then use the javascript to show them as needed.

Of course you could just eliminate the need for the javascript if you have a server side language (i.e. PHP, ASP.NET) that is constructing the page, then you can just set their hidden state correctly to begin with.

In your HTML code put in a style code that hides the div by default. This will be evaluated much earlier than the Javascript.

Do you possibly want to maybe call the "hideSomeDivs()" function on the onload event of the body element.