Event: Using 'available', 'contentready', and 'domready'
+ ++
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:available+ targets a single element and fires when that element is available (when it + responds todocument.getElementById()) — but you can't + count on the element's children having been loaded at this point.
+
+ contentready:When you care about not + just your target element but its children as well, use +contentready. This event will tell you that your target + element and all of its children are present in the DOM.
+
+ domready:Some DOM scripting operations + cannot be performed safely until the page's entire DOM has loaded. The +domreadyevent will let you know that the DOM is fully loaded + and ready for you to modify via script. This custom event takes the place of + theonDOMReadyevent from previous versions of YUI.
+
+
In the example box below, available,
+contentready and domready are all in use. A
+<div> (with a green background) loads; it has 100 chidren;
+one of those children is an arbitrarily large image that will take awhile to
+load. Keep an eye on the console, if you have one available in your browser.
+You'll see that the <div> (1) becomes available, (2) its
+content becomes ready (after all of its 100 children have loaded), (3) the DOM
+becomes ready, and finally (4) the page loads.
Internet Explorer note: It isn't always safe to modify
+content during the available/contentready until after the domready
+moment. In this browser, domready will execute before the
+available/contentready listeners.
+
+
3.x note: This example has all of the YUI requirements included
+on the page. This differs from the default YUI configuration, which will dynamically load required
+YUI modules. Dynamic loading works asynchronously, so the domready moment
+likely will have passed when it comes time to bind the listeners, and possibly
+the window load event as well. All of the event listeners will actually fire in this
+case, but the order of the events will not be the same. domready will
+execute before the available/contentready listeners, and the window
+load event may as well.
-
+
- child node #0 +
- child node #1 +
- child node #2 +
- child node #3 +
- child node #4 +
- child node #5 +
- child node #6 +
- child node #7 +
- child node #8 +
- child node #9 +
- child node #10 +
- child node #11 +
- child node #12 +
- child node #13 +
- child node #14 +
- child node #15 +
- child node #16 +
- child node #17 +
- child node #18 +
- child node #19 +
- child node #20 +
- child node #21 +
- child node #22 +
- child node #23 +
- child node #24 +
- child node #25 +
- child node #26 +
- child node #27 +
- child node #28 +
- child node #29 +
- child node #30 +
- child node #31 +
- child node #32 +
- child node #33 +
- child node #34 +
- child node #35 +
- child node #36 +
- child node #37 +
- child node #38 +
- child node #39 +
- child node #40 +
- child node #41 +
- child node #42 +
- child node #43 +
- child node #44 +
- child node #45 +
- child node #46 +
- child node #47 +
- child node #48 +
- child node #49 +
- child node #50 +
- child node #51 +
- child node #52 +
- child node #53 +
- child node #54 +
- child node #55 +
- child node #56 +
- child node #57 +
- child node #58 +
- child node #59 +
- child node #60 +
- child node #61 +
- child node #62 +
- child node #63 +
- child node #64 +
- child node #65 +
- child node #66 +
- child node #67 +
- child node #68 +
- child node #69 +
- child node #70 +
- child node #71 +
- child node #72 +
- child node #73 +
- child node #74 +
- child node #75 +
- child node #76 +
- child node #77 +
- child node #78 +
- child node #79 +
- child node #80 +
- child node #81 +
- child node #82 +
- child node #83 +
- child node #84 +
- child node #85 +
- child node #86 +
- child node #87 +
- child node #88 +
- child node #89 +
- child node #90 +
- child node #91 +
- child node #92 +
- child node #93 +
- child node #94 +
- child node #95 +
- child node #96 +
- child node #97 +
- child node #98 +
- child node #99 +
+
+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 Logger 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).
CSS:
+ +The CSS colors the contentContainer element and hides the big list to keep the example more compact.
+ + + +JavaScript:
+In the script, we create an anonymous function that contains our YUI instance (Y). We then subscribe to the four events in which we're interested and, in each case, log a message to the console or Logger to express the timing of the events as they fire.