As web pages get richer, they tend to get slower. One way to make your
+ pages as responsive as possible is to carefully storyboard the page-load
+ and page-paint processes so that the interactions most central to the
+ page's purpose are enabled as early as possible. The window object's
+ load event won't happen until the full DOM and all image data
+ have loaded. Putting off script execution until after the page loads can
+ be optimal for some scripts, but sometimes you won't want to wait that long
+ to begin interacting with the page via script.
The Event Utility gives you three additional interesting moments that
+ occur during a page's load process: available,
+ contentready, and domready.
In the example box below, all three events are all in use. A
+ <div> (with a green background) loads; it has 100 children;
+ one of those children is an arbitrarily large image that will take awhile to
+ load.
+ Note: The order of the events isn't guaranteed because
+ available and contentready are fired from a polling mechanism, and
+ not all browsers support a native event to signal domready, so that
+ will fall back to a timer as well. Using these events, you can trust
+ the state of the DOM per subscription, but don't expect strict ordering
+ between events.
+
Internet Explorer note: It isn't always safe to modify
+ content during the available/contentready until after the domready
+ moment.
-
+
+
+
+Source Code for This Example:
+ +Markup:
+ +The markup used to create the DOM is very simple, consisting of a <div> that holds a <ul> with 100 child <li>s and a single ~3MB image. The <ul> will take a little time to load, and the image (loading over the internet) will take a few seconds to load even on a fast connection. That should allow us to see in the browser console some time deltas between when the <div> whose ID is contentContainer becomes available, when its children (those 100 <li>s) are ready, when the DOM is ready (including all the navigation elements on the page), and lastly when the page loads (ie, when that ~3MB image is fully loaded).
<div id="contentContainer"> + + <!--a ul with an arbitrarily large number of children:--> + <ul> + <li>...</li> + <!--...100 more of these--> + </ul> + + <img src="http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/large/uluru.jpg" width="500" alt="Uluru" id="image" /> + +</div>+ + +
CSS:
+ +The CSS colors the contentContainer element and hides the big list to keep the example more compact.
+ +<style type="text/css">
+ #contentContainer {padding:1em; background:#999966;}
+ #contentContainer ul {height:0px; overflow:hidden;}
+</style>
+
+
+JavaScript:
+In the script, we subscribe to the four events in which we're interested and, in each case, log a message to the console to express the timing of the events as they fire.
+ +YUI().use('*', function(Y) {
+ var results = Y.one('#demo');
+
+ //assign page load handler:
+ Y.on("load", function () {
+ results.append("<p>The window load event fired. The page and all of its image data, including the large image of Uluru, has completed loading.</p>");
+ }, Y.config.win);
+
+ //assign domready handler:
+ Y.on("domready", function () {
+ results.append("<p>The DOMContentLoaded event fired. The DOM is now safe to modify via script.</p>");
+ });
+
+ //assign 'contentready' handler:
+ Y.on("contentready", function () {
+ results.append("<p>The 'contentready' event fired for the element 'contentContainer'. That element and all of its children are present in the DOM.</p>");
+ }, "#contentContainer");
+
+ //assign 'available' handler:
+ Y.on("available", function () {
+ results.append("<p>The 'available' event fired on the element 'contentContainer'. That element is present in the DOM.</p>");
+ }, "#contentContainer");
+
+ results.append("<p>As the page loads, you'll see the 'available', 'contentready', 'domready', and window load events logged here as they fire in sequence.</p>");
+
+});
+
+