Question

I’ve done the prerequisite searching of stackoverflow and looking on the internet. I suspect 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.

Answer 1

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.