1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith #contentContainer {padding:1em; background:#999966;}
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith #contentContainer ul {height:0px; overflow:hidden;}
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith<div class="intro">
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith <p>As web pages get richer, they tend to get slower. One way to make your
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith pages as responsive as possible is to carefully storyboard the page-load
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith and page-paint processes so that the interactions most central to the
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith page's purpose are enabled as early as possible. The window object's
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith <code>load</code> event won't happen until the full DOM and all image data
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith have loaded. Putting off script execution until after the page loads can
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith be optimal for some scripts, but sometimes you won't want to wait that long
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith to begin interacting with the page via script.</p>
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith <p>The Event Utility gives you three additional interesting moments that
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith occur during a page's load process: <a href="domready.html">`available`,
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith `contentready`, and `domready`</a>.</p>
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith <p>In the example box below, all three events are all in use. A
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith `<div>` (with a green background) loads; it has 100 children;
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith one of those children is an arbitrarily large image that will take awhile to
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith <strong>Note:</strong> The order of the events isn't guaranteed because
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith `available` and `contentready` are fired from a polling mechanism, and
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith not all browsers support a native event to signal `domready`, so that
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith will fall back to a timer as well. Using these events, you can trust
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith the state of the DOM per subscription, but don't expect strict ordering
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith between events.
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith <p><strong>Internet Explorer note:</strong> It isn't always safe to modify
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith content during the available/contentready until after the `domready`
819e90d415ed17d59af3a247b2ad9d6feb0c21b5Luke Smith<div class="example yui3-skin-sam">
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith {{>ready-example-source}}
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith<h2 class="first">Source Code for This Example:</h2>
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith<h3>Markup:</h3>
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith<p>The markup used to create the DOM is very simple, consisting of a <code><div></code> that holds a <code><ul></code> with 100 child <code><li></code>s and a single ~3MB image. The <code><ul></code> 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 <code><div></code> whose ID is <code>contentContainer</code> becomes available, when its children (those 100 <code><li></code>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). </p>
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith<div id="contentContainer">
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith <!--a ul with an arbitrarily large number of children:-->
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith <li>...</li>
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith <!--...100 more of these-->
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith <img src="http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/large/uluru.jpg" width="500" alt="Uluru" id="image" />
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith<h3>CSS:</h3>
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith<p>The CSS colors the contentContainer element and hides the big list to keep the example more compact.</p>
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith<style type="text/css">
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith #contentContainer {padding:1em; background:#999966;}
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith #contentContainer ul {height:0px; overflow:hidden;}
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith<h3>JavaScript:</h3>
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith<p>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.</p>
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke SmithYUI().use('*', function(Y) {
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith var results = Y.one('#demo');
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith //assign page load handler:
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith Y.on("load", function () {
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith 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>");
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith //assign domready handler:
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith Y.on("domready", function () {
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith results.append("<p>The DOMContentLoaded event fired. The DOM is now safe to modify via script.</p>");
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith //assign 'contentready' handler:
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith Y.on("contentready", function () {
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith results.append("<p>The 'contentready' event fired for the element 'contentContainer'. That element and all of its children are present in the DOM.</p>");
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith }, "#contentContainer");
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith //assign 'available' handler:
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith Y.on("available", function () {
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith results.append("<p>The 'available' event fired on the element 'contentContainer'. That element is present in the DOM.</p>");
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith }, "#contentContainer");
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith 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>");