- The Book of Dojo
- Quick Installation
- Hello World
- Debugging Tutorial
- Introduction
- Part 1: Life With Dojo
- Part 2: Dijit
- Part 3: JavaScript With Dojo and Dijit
- Part 4: Testing, Tuning and Debugging
- Part 5: DojoX
- The Dojo Book, 0.4
Page Load / Unload
Submitted by MattBowen on Tue, 06/05/2007 - 18:37.
To perform any DOM scripting, one needs a DOM to work with. Otherwise, you don't have nodes to attach your events to or manipulate, and the results of your program can be undesirable (e.g., no output for no obvious reason, or events attached to the document root).
Dojo elegantly solves this problem with dojo.addOnLoad, which we introduced back in Functions Used Everywhere. Better yet, dojo.addOnLoad starts your scripts after the DOM has loaded but before all of the page elements have loaded. That means your script doesn't have to wait for images and other large resources before it manipulates page structure. This can significantly improve the perceived performance of your scripts.
Like other event handlers, you register a function with addOnLoad - either a function literal, or a function name as a string. You can also pass an object and a method name (as a string) to call an object-oriented method.
// Runs tp.toggle() - see dijit.TitlePane - when the page is done loading.
dojo.addOnLoad(tp, "toggle");
// Function form
dojo.addOnLoad(function() {
dojo.byId("Status").innerHTML = "You may begin.";
});
<script>
<body class="tundra">
<div dojoType="dijit.TitlePane" jsId="tp"></div>
<div id="Status"></div>
dojo.addOnLoad(tp, "toggle");
// Function form
dojo.addOnLoad(function() {
dojo.byId("Status").innerHTML = "You may begin.";
});
<script>
<body class="tundra">
<div dojoType="dijit.TitlePane" jsId="tp"></div>
<div id="Status"></div>
Acting in parallel to dojo.addOnLoad is dojo.addOnUnload , which runs functions when the page is being "unloaded" (e.g., when the user clicks a link off of the current page). This gives you the opportunity to send notifications to your web application or clean up unavoidable memory leaks.
dojo.addOnLoad and Cross-Domain Loading
Dojo.addOnLoad() is doubly-important when using cross-domain resources. Non-DOM-related Dojo functions can be called anytime from a locally-installed Dojo build, as in:
<script>
// Works in local Dojo. Doesn't work in XDomain
dojo.require("dojox.uuid.Uuid");
dojo.require("dojox.uuid.generateTimeBasedUuid");
var uniqueId = new dojox.uuid.Uuid(dojox.uuid.generateTimeBasedUuid());
...
// Works in local Dojo. Doesn't work in XDomain
dojo.require("dojox.uuid.Uuid");
dojo.require("dojox.uuid.generateTimeBasedUuid");
var uniqueId = new dojox.uuid.Uuid(dojox.uuid.generateTimeBasedUuid());
...
In a local Dojo build, dojo.require loads the dojox.uuid code right away. In Cross-Domain Dojo, this is not guaranteed due to browser security rules. But this code works fine on either:
<script>
// Works in local and XDomain
dojo.require("dojox.uuid.Uuid");
dojo.require("dojox.uuid.generateTimeBasedUuid");
dojo.addOnLoad(function() {
var uniqueId = new dojox.uuid.Uuid(dojox.uuid.generateTimeBasedUuid());
...
});
</script>
// Works in local and XDomain
dojo.require("dojox.uuid.Uuid");
dojo.require("dojox.uuid.generateTimeBasedUuid");
dojo.addOnLoad(function() {
var uniqueId = new dojox.uuid.Uuid(dojox.uuid.generateTimeBasedUuid());
...
});
</script>
We highly recommend initializing your code with dojo.addOnLoad. Semantically, it's no different than bare code, and it allows you to switch from XDomain to local Dojo and back.
- Printer-friendly version
- Login or register to post comments
- Unsubscribe post
In the 1st example 'You may
In the 1st example
'You may begin."
is wrong, the right sentence should be:
"You may begin."
thanks. took me a second to
thanks. took me a second to see the difference. had it been a snake, it'd bit me.