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.