[Dojo-interest] pre loading overlay issue

John Locke mail at freelock.com
Sat Jun 5 16:02:55 EDT 2010


Jean-Rubin Leonard wrote:
> Hi all,
> I am trying to achieve an application preloading overlay as described 
> here:
> http://www.sitepen.com/blog/2008/10/06/implementing-a-web-application-preloading-overlay/, 
> except I want to use dojox.widget.Standby.
Well, that's a bit of a problem -- it looks like dojox.widget.Standby 
requires a few other dojo files just to get started up, so you're going 
to have to wait for much of Dojo to load before the widget can turn 
on... There's not really a way around that.

> I'm having an issue where the code that should show the overlay gets 
> run (witness the console.log) but the overlay does not show. The 
> application races on and requires more modules and at the very end 
> when all modules are loaded, just prior to showing the widgets, it 
> shows the overlay for like half a second. Anyone can tell me what I'm 
> doing wrong and what solution I could use?

I think your nested dojo.addOnLoad functions are not behaving the way 
you expect. And also, dojo.requires are synchronous -- they're going to 
block execution until they're loaded--so nesting them in multiple 
addOnLoads isn't going to help anything. I'm not exactly sure when 
addOnLoad fires after the initial page load--so I'm really not sure what 
sequence your functions load--but I don't think the way you've done it 
is a good approach.

If you want to have a pre-loading overlay, I think you really have to do 
it with your own Javascript before Dojo loads. Otherwise most of the 
delay has happened before your widget starts up.

So basically, I would suggest putting the overlay domNode right in the 
HTML, with a css class that specifies the loading graphic, position, 
size, etc and sets the display to none. Then put some inline javascript 
AFTER the domnode that uses DOM methods to set the display to block 
(this is how you make sure it degrades with javascript off--and at that 
point you can't count on dojo being ready). That's pretty much the 
approach in the example.

Then in your (single) addOnLoad, require all the modules you're looking 
for and hide the overlay.

>             dojo.addOnLoad(function(){
>                 dojo.require("dojo.parser");
>                 dojo.require("dijit.layout.BorderContainer");
>                 dojo.require("dijit.layout.ContentPane");
>   ...

>                dojo.require("dijit.Toolbar");
>                 dojo.addOnLoad(function() {
>                     //We now parse the page's dijits
>                     dojo.parser.parse();
>                     //Hide loader when we done
>                     preloader.hide();
>                 });
>             });

... aside from anything else in there, the second addOnLoad function is 
worthless -- because script execution blocks on each of those 
dojo.require's, so all of those files are loaded before the 
dojo.addOnLoad is even called. You can safely put the 
dojo.parser.parse() after all the requires, not in an addOnLoad. I don't 
know whether that second addOnLoad function would get called immediately 
(because the document is loaded) or after the next AJAX call -- my guess 
is that it might be slightly more useful to put an addOnLoad function 
like this ahead of an asynchronous XHR call, because by the time the 
javascript interpreter becomes idle, there's another request happening 
so it wouldn't fire the addOnLoad immediately. That's a guess 
though--can somebody confirm?

John Locke

More information about the Dojo-interest mailing list