Home > browser, dojo, javascript, tech > Splash screen for a javascript application

Splash screen for a javascript application

At work we are developing a web application that is delivered in a single-page (like GMail, Yahoo! Mail etc). We use the Dojo javascript framework.

Our homepage has multiple javascript widgets. When a user gets to the homepage, the browser downloads the HTML, javascript and CSS files and there is a delay before the DOM elements are decorated and laid out properly. During this delay the user gets to see a partially loaded page. The user can’t start using the application unless the whole page is laid out well, so showing a partially loaded ugly page is not desirable. Yahoo! Mail shows a splash screen of Liam, their mascot, while the application is being loaded – I wanted to implement the same feature for my application.

Searching the Dojo mailing list, I was able to figure out how do this. Essentially you have two DIVs on the homepage – one with the splash screen and one with the real LayoutContainer holding the application widgets. Initially the splash DIV is shown, and the real DIV is hidden. When the page finishes loading and after all widgets are laid out properly, the splash DIV will be hidden and the real DIV would be shown.

function show_main_gui() {
    dojo.byId("splash").style.display = "none";
    dojo.lfx.fadeShow("real", 100);
<div id="splash" style="position: absolute; top: 200px; width: 100%;z-index: 100;">
   <div align=center>
        <img src="images/throbber.gif"/>

<div id="real" dojoType="LayoutContainer"
    style="opacity: 0.01;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=1);">

I got the throbber built at ajaxload.info – it is a great site for making throbber images.

Categories: browser, dojo, javascript, tech
  1. Juby
    January 16, 2007 at 6:50 pm

    Throbbers !! I loved them 🙂 thanks a lot for this link

  2. January 7, 2009 at 1:33 am

    Excellent, very helpful…and the very first link on Google search for “dojo splash screen”. Well done!

  3. January 7, 2009 at 2:30 am

    One observation though, to make this work on Dojo 1.2 I had to use dojo.anim:

    dojo.anim(“main”, { opacity: 100 }, 500);

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: