Dojo "loading"-message

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.


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.


i am using dojox.widget.Standby for this purpose: http://dojotoolkit.org/reference-guide/dojox/widget/Standby.html

dojo.require("dojox.widget.Standby");

var standby = new dojox.widget.Standby({
                                 target: "target-id-toStandby",
                                 color: "white",
                                 image: "/images/loading-ajax.gif"
                             });
                             document.body.appendChild(standby.domNode);
                             standby.startup();
                             standby.show();

when your content is ready use...

standby.hide();

"target-id-toStandby" is the id of the div you want to "freeze"

Tags:

Javascript

Ajax

Modal Dialog

Dojo

Recent Posts