Worklight Loading Indicator

Question

Our applications loading process is lengthy, so to provide the user with indication the app is functioning and merely loading, we want to provide a loading/initializing indicator. I tried using WL's busy indicator, but it seems its availability isn't complete this early in the apps lifecycle. So I just created a simple DIV in our single-page application with loading indication. Once the app has completed loading, I just hide it. It works fine when I first run the app. Future runs behave differently.

First Run : It shows up immediately and is hidden once the app has finished its initialization.
Subsequent runs : It doesn't show up with the first presentation and flashes quickly just before the app completes initialization and begins normal flow.

The loading DIV (I made this completely static and not dependent on any JS or CSS):

    <div id="loadingInd"
         style="z-index:1;position:absolute;left:85px;top:185px;display:block;">
         Loading2...
    </div>

Hiding code :

    $('#loadingInd').hide()

A little info on the loading process:

We pre-load all JS and HTML files used by the application. A task to change this to a more lazy loading process is in the works, but hasn't moved high enough the priority list to be completed. Once all JS and HTML files are loaded, we present UI widgets (menu, login button, etc). Until the loading is complete we just have a loading splashscreen. So that loadingInd DIV is just static content in the splashscreen. What I don't understand is why it shows up immediately with the rest of the splashscreen when the app is first run, but doesn't show up till much later in subsequent runs. I think the reason it looks like it's flashing is because it's getting drawn just before the call to hide(). Is there something about subsequent runs that might cause this different drawing behavior? I've logged CSS info in multiple places along the initialization process and everything seems consistent among first and subsequent loads.

---

After a bit of discussion here, I've gone back to trying the busyIndicator. I show it just before I start loading all my content and hide it when I'm ready to start loading widgets. It behaves just like the DIV from above. I'm thinking there's something going on with the drawing.

Answer 1

I used this on my website, edit: here is a link to a working jsfiddle: http://jsfiddle.net/sYghV/4/

$(window).load(function() {
$("#pageLoadingMessage").fadeTo("fast", 0, function() {
      document.getElementById("pageLoadingMessage").style.zIndex="-100";
    });
});

html:

<div id="pageLoadingMessage"> 
<p style="top: 50%; position: absolute; left: 50%;">
<img src="http://sierrafire.cr.usgs.gov/images/loading.gif" style="width: 24px; height: 24px;">
</p> 
</div>

css:

#pageLoadingMessage {
background-color: gray;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100;
text-align: center;
vertical-align: bottom;
}