Archive

Archive for the ‘dojo’ Category

Splash screen for a javascript application

January 6, 2007 3 comments

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);
}
dojo.addOnLoad(show_main_gui);
<div id="splash" style="position: absolute; top: 200px; width: 100%;z-index: 100;">
   <div align=center>
        <img src="images/throbber.gif"/>
   </div>
</div>

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

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

Advertisements
Categories: browser, dojo, javascript, tech