How do I delay page display until JS is done?

I've done the prerequisite searching of stackoverflow and looking on the internet. I suspect开发者_C百科 that the answer is ' This can't be done. ' but I'm hoping someone here might have a solution.

My page loads fine, but many of my YUI components don't fully load before being displayed. For example, my DataTable will resize itself when displaying or my buttons will appear in their native form and then get YUI-fied.

Is there a way to delay the displaying of the page until all the Javascript is finished (i.e. all my YUI components are finished rendering)? I don't know how this would happen, as a lot of the JS depends on the DOM being present to manipulate it.

---

Is there a way to delay the displaying of the page

If I understand correctly you would like to hide it until it's done? If that's the case I have an idea:

1. add a wrapper around the element you want to hide (or use position:absolute to cover it)
2. give that div a background which use the color of the surrounding with a positive z-index
3. when all your javascript has loaded remove the z-index or change the color of the background to transparent

Your javascript code would look like this:

• do 1. and 2.
• load your js
• do 3.

Of course it needs to be synchrone.
As an alternative you could use visibility:hidden / visible on the element itself but I dunno for sure if it's well supported.

---

Try putting your Javascript in the head section of the page, as if it's near the end of the page, it'll load later (making the first elements load faster). OR, better yet, serve up your Javascript compressed and via a CDN, such as Amazon CloudFront so that it loads quickly.