Correct Loading procedures with a splash screen?

[deleted-user-Pi5x1UjkS2PY]

When a user is loading up my javascript map they are seeing a bunch of the ugly stuff as it is doing so.  All of the pieces that make up my content panes and such.

How can I get the content panes to load behind the scenes.  I know the first time the user loads this stuff it will be the slowest but I add a bunch of bookmarks for each of our locations(800) and some bookmarks for districts as well for quick zooming.  So this takes 30 seconds or so.

Any suggestions on how best to do this?  Maybe a splash screen at the start and then when everything is finished loading it goes away?  How do I do something like that?

[KenBuja · Accepted solution]

Take a look at this discussion, which puts a blank div in front of everything and hides it once the page is ready.

Here's how I remove it in AMD using the ready function

ready(function () {
  //other stuff going on
  domStyle.set(dom.byId("outerDIV"), "display", "none");
)};

[MattDriscoll]

Here's what I would do:

1. Create a class on the body of the HTML and call it something like "loading".

2. Put all the stuff you want hidden at runtime in a div and give it a class like "app-content".

3. In CSS, write something like this:

.app-content{
     display:block;
}
.loading .app-content{
     display:none;
}

4. Once the page is ready, remove the loading class from the body of the html.

5. Eat cake

If you want a loading spinner you could have another div displayed via css like this:

.loading-spinner{
     display:none;
}
.loading .loading-spinner{
     display:block;
     position:absolute;
     z-index:2;
     left:0;
     top:0;
     width:100%;
     height:100%;
     background: url(myspinner.gif) center center no-repeat;
}