Menu
I'm new to Dojo, so I need a little help.
Some of my links takes a while (when the user clicks, it takes several seconds before the page starts loading), and I'd like to add a "loading"-message.
I can do it the "old fashion way", but I want to learn the new, easier, smarter Dojo-way.
Exactly how it works is not important right now, but I imagine something like this:
A rectangle appears in the middle of the browser-windows. (Not the middle of the document.) It has an animated gif, and a message like "Please wait...".
All other elements are disabled, maybe "faded out" a bit. Maybe a big white 50% transparent rectangle, which sits between the "loading"-message and the rest of the document.
405
What you are describing assumes that dojo itself has already been loaded by the time that the modal dijit.Dialog appears with the loading message.
Now, normally, dojo starts executing once your page is fully loaded, and you would normally put your dojo code inside an anonymous function passed as parameter of dojo.addOnLoad().
That entails that the remaining part of your page (what you call your "links") will have to be loaded through ajax (using, for instance, dijit.layout.ContentPane). That way, dojo can execute before the content is downloaded, and your "waiting" message can appear earlier.
It might look like this:
<html>
<head>
<link rel="stylesheet" href="/dojo/dijit/themes/tundra/tundra.css" type="text/css" media="screen" />
<script type="text/javascript" src="/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
/* make sure that you shrinksafe together your libraries and dojo's for faster loading... */
<script type="text/javascript" src="/dojo/yourOwnDojoCompressedScripts.js"></script>
<script type="text/javascript">
var dialog;
dojo.addOnLoad(function(){
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.Dialog");
dialog = new dijit.Dialog();
dialog.setContent("<p>This page will be available in a tick!</p>");
dialog.show();
});
</script>
</head>
<body class="tundra">
<div id="delayedContent"
dojoType="dijit.layout.ContentPane"
href="/myContentUrl"
onLoad="dialog.hide()">
</div>
</body>
</html>
The only flaw in that plan is dojo itself: expect your shrinksafed library to weigh over 90K (possibly up to 300K, depending on how much stuff you put in there). On a slow connection, that still takes a noticeable amount of time to download. That said, we're talking of a static 90K --- the same user will download it only once per session, and even less often than that if you take the time to set appropriate cache/expire headers when those static files are served.
87
Dojo has one such a component already: Dojox Busy Button. You might be also interested in the following articles by Sitepen: Dojo: Building Blocks of the Web (demonstrates blocking the page content) and Implementing a Web Application Preloading Overlay.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
