the themeTester in dijit/themes/themeTester.html has an example of how to use a div to overlay the viewport during load with a small spalsh, that fades out when load is ready.

it amounts to: parseOnLoad:false, #loaderSpalsh { position:absolute; top:0; left:0; width:100%; height:100%; }

and dojo.addOnLoad(function(){
dojo.parser.parse(dojo.body());
dojo.fadeOut({ node:"loaderSplash", duration:420 }).play(25);
});

the key is to defer the parsing of the body until after onLoad has fired, giving the browser time to pull in all the required objects while viewing the splash screen, then parsing, then removing the overlay when the page is "ready" (parse() is sync) ..

Thanks, I would never find it alone.

Sorry but i don't understand why the #loader is loading before every other stuff??
For me, the browser would display all the "normal" html elements (like the #loader or other .gif images) and after, parse all the dojo code in the page.

But this is not the real working, and i don't understand why.

Any suggestions/explanations?

Thanks!

Regards
Squinty

I have looked around for awhile and have not found any complete examples of creating a splash screen.

I would like to see a .gif of may choice when a user hits my page and then unhide my main div once the page is rendered. I would even settle for show my main div after a set amount of time.

I would think that I would have to display my splash div before the dojo.js file is loaded. Then unhide my main div once the page renders and hide my splash div. Any suggestions?

The below was tried. I found in on another post. This did not work because I was still able to see my main div.

dojo.addOnLoad(function() {
dojo.parser.parse(dojo.body());
dojo.fadeOut({ node:"splash", duration:10000 }).play(10000);
}

You see the main div because you haven't put a z-index attribute to your loading element css...

try this:

.loaderSpalsh {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:999;
}

ceers,
Stefano.

PS.

dojo is powerfull!