Hide page before loaded


I’m wondering if anyone has dealt with this issue and can offer some assistance.

I’m running several web pages that you can switch between and each has quite a bit of dhtmlx layout and tab code. When switching between these pages, while loading the data, the pages look horrible. Tabs and div info is shown up in the left hand corner until the page finally loads and then everything looks good.

Is there any way to hide all of this until the page is fully rendered? Any tricks?

Thanks, Max


set document.body.style.opacity = 0
or put 100% width/height blank div with #fff background and z-index: 999 and “loading” icon

Thanks, you actually gave me an idea that works great.

On the body tag:

And then on page load:


Works on all new browsers.

Problem with trying to put a div with “Loading” is that it won’t appear until the page is rendered, so you would never see it.


Sorry meant “visible” not “hidden” on page load.



to show custom divs with loading indicators, you need a div attached to body with width/height set to 100% and z-index about 1000 (in case of dhx4 will enough) or any ready 3rd party library