How to make sure div in background isn't visible until hidden?

Question

For my mobile website I have two full screen divs, eg:

<div id="splash-page"> ... </div>
<div id="content"> ... </div>

I have set up the z-indexs so that #splash-page is on top of #content . This is because I would like it so that #content is not visible until I call $("#splash-page").hide() .

Here's my CSS:

#landing {
    z-index: 9999;
}

However, when this page loads on a slow connection, sometimes #content is visible and then #splash-page covers it.

What is the best way to achieve the desired effect without doing an AJAX load or something else complicated with #content ?

Answer 1

What about just hiding #content initially, instead of doing it through z-index? Then you can call $("#spalsh-page").hide(); and $("#content").show(); $("#spalsh-page").hide(); and $("#content").show(); in tandem.

I would put a display:none; style on #content initially

Answer 2

use css and set display to none by default:

#content
{
display:none;
}