Dojo Dijit and HTML5 in Real world applications/Dojo/dojo.ready
dojo.addOnLoad
dojo.addOnLoad() and dojo.ready() are synonyms for the same function: The function fires when dojo is ready. Function calls that require the dojo framework should not be called until dojo is ready. These functions may be placed in the dojo.addOnLoad() function.
How to use
dojo.addOnLoad( function() {/*functions or statements to execute when dojo is ready*/} );
Tips and tricks
Avoid flashy load of dijit widget elements
Most HTML5 implementations might need a "soft loader": The soft loader hides the html rendering until dojo has been loaded and all dijit widget elements have been rendered correctly. Below you will find the 3 elements necessary for the implementation of a soft loader:
- The JavaScript
- CSS
- HTML
<script type="text/javascript">
/* SoftLoader
* This function has the following functions:
* * Hide the loading to avoid flashes while elements are loading.
* * Complete a nice fade in and hide the 'loader' message.
*/
dojo.addOnLoad(function() {
dojo.byId('loaderInner').innerHTML += " OK!";
setTimeout(function hideLoader(){
dojo.fadeOut({
node: 'loader',
duration:1000,
onEnd: function(n){
n.style.display = "none";
}
}).play();
}, 250);
});
</script>When dojo is ready "OK!" will be added to the <div id="loaderInner"> node. The fadeOut will spend 1000/1000 seconds to hide the <div id="loader"> node.
CSS:
/* Soft Loader prevent unsightly flash of un-styled dijit content */
#loader {
padding:0;
margin:0;
position:absolute;
top:0; left:0;
width:100%; height:100%;
background:#ededed;
z-index:999;
vertical-align:middle;
}
#loaderInner {
padding:5px;
position:relative;
left:0;
top:0;
width:450px;
background:#224388;
color:#fff;
}And finally the HTML:
<body class="claro">
<!-- basic preloader: Soft Loader -->
<div id="loader"><div id="loaderInner">Loading: Dojo Dijit and HTML5 in Real world applications... </div></div>
....
</body>Verified in
IE 8, Firefox 3.6.22, Dojo 1.6.1
References
See demo here: Real world applications: dijit.Dialog