Image via Wikipedia
Intro
If you’re building a large site and utilizing Dojo you can get pages that are crammed full of widgets, layout containers, dialogs and more. All these useful features give your site a clean and very user-friendly experience. One side-effect, however, is that the HTML/CSS is loaded and then Dojo begins parsing which can cause your page to jump around while each element is rendered. I found this highly annoying so I scoured the web (<3 Google!) and managed to find a solution. I utilize a #loader div which covers the entire screen and then fade it out using dojo.addOnLoad(). This is extremely simple to implement and should only take a few minutes.
Live Demonstration
Take a peak at the live demonstration of the basic loader (or the fancy loader) to see where we’re headed. If you’re interested in how I got there keep on reading!
The HTML
The HTML consists of a single div located directly under the <body> tag of your page and another for content that will be parsed by Dojo.
<div id="loader"></div> <div id="content">I AM SOME CONTENT!</div>
The CSS
CSS stretches the div to the full viewport of the page. I color the #loader the same color as the background of the page I’m loading to give it a nice and smooth transition.
<style type="text/css">
body {
background: #fff;
}
#content {
text-align: center;
width: 100%;
}
#loader {
background: #fff;
height: 100%;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 0;
vertical-align: middle;
width: 100%;
z-index: 999;
}
</style>
The Script
Even the Dojo code is easy! We tell dojo to manually parse the content div and then we add a fadeOut animation to the #loader div and onComplete set the loader display to none.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4.1/dojo/dojo.xd.js"></script>
<script type="text/javascript">
//CDATA[
dojo.require("dojo.parser");
dojo.addOnLoad(_initLoader);
function _initLoader() {
var content = dojo.byId("content");
var loader = dojo.byId("loader");
// Parse the content manually
dojo.parser.parse(content);
// Fade the loader div out
dojo.fadeOut({
node: loader,
duration: 250,
onEnd: function() {
loader.style.display = "none";
}
}).play(250);
}
//]]>
</script>
Pump it up!
So, we created a loader, and it’s pretty nifty but let’s pump it up a bit by adding a “Loading…” message a la Google’s GMail. First, we need to modify the #loader div to include a #loaderInner which will house our loading message like so:
<div id="loader"><div id="loaderInner">Loading...</div></div> <div id="content">I AM SOME CONTENT!</div>
Next, we tweak the CSS a bit to colorize the loading message, throw in some padding, and give it a bit of flare.
body {
background: #fff;
}
#content {
text-align: center;
width: 100%;
}
#loader {
background: #fff;
height: 100%;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 0;
vertical-align: middle;
width: 100%;
z-index: 999;
}
#loaderInner {
-webkit-box-shadow: -1px 1px 5px #888;
background-color: #FFFFCB;
color: #c99800;
display: table;
font-size: 16px;
padding: 5px 13px;
text-align: center;
}
</style>
That’s one sexy loader if I do say so myself – enjoy it!
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_c.png?x-id=e1cd0ce5-10ad-4d57-8aa4-761058fee161)
loading...
[...] Creating a fadeOut loader with Dojo. GD Star Ratingloading…Dojo marketing and increasing the community10.0103 Tags: Blog, Cascading Style Sheets, Dojo Toolkit, HTML, JavaScript, JQuery, Languages, Marketing, Programming, Twitter Creating a Twitter-esque login box with Dojo Twitter integration! [...]
Nice article! You can see something similar, where you can set up a nice loader div in a dijit.layout.ContentPane, with the upcoming revised Dojo API doc tool at http://api-staging.dojotoolkit.org/ .
Keep up the good work!
loading...
Excellent writeup. What do you think of the idea of having a similar system but on a more modular level, where any widget that was going to have dynamic content would get it’s own fading screen. That way content that was already embedded on the page would be visible as the user was loading the page, but other dynamic elements would show their loading screens until the widget was fully loaded.
loading...
I had thought about something like that but haven’t really had the need to implement it. Also, I would probably be limited on my current knowledge of Dojo.
loading...