Event: Using onAvailable, onContentReady, and onDOMReady

Ajax YUI Event

次は、window.onloadの拡張。Using onAvailable, onContentReady, and onDOMReadyの序文を読んでなるほどね。
Windowのonloadイベントは、すべてのオブジェクトが用意万端整ってから発生するけど、それだと、重たい画像なんかを貼るときは、処理が待ちきれないわけだ。それで、DOMごとの状態を見て、イベントハンドラーが定義できるという仕掛け。

ソースをのぞくと、Loggerを使って書き出すようになっているが、Loggerはまだやってない。
ということで、alertをあげるように変更。

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>Ajax_Sampling</TITLE>
<style type="text/css"> 
<style>
#contentContainer {padding:1em; background:#999966;}
#contentContainer ul {height:0px; overflow:hidden;}
#contentContainer li {visibility:hidden;}
</style>

<!-- 読み込むscriptはyahoo-dom-event/yahoo-dom-event.jsだけ。 --> 
<script type="text/javascript" src="scripts/yui/yahoo-dom-event/yahoo-dom-event.js" ></script> 

<script>
YAHOO.example.Timing = function() {

	//create shortcut for YAHOO.util.Event:
	//eventオブジェクトの作成
	var e = YAHOO.util.Event;

	//the returned object here will be assigned
	//to YAHOO.example.Timing and its members will
	//then be publicly available:
	//無名オブジェクトをリターン値とする。

	return {
		//イニシャライズでEventとハンドラーを仕込む。
		init: function() {
			
			//assign page load handler:
			//これが一番遅い。全て読み込まれて、availableになったときに発砲
			e.on(window, "load", this.fnLoadHandler, 
                             "The window.onload event fired.  
                             The page and all of its image data, 
                        including the large image of Uluru, has completed loading.");

			//assign onDOMReady handler:
			//これが一番早い。
			//DomがLoadされて、Scriptが適用できる状態で発砲
			e.onDOMReady(this.fnHandler, 
                             "The onDOMReady event fired.  
                        The DOM is now safe to modify via script.");
			
			//assign onContentReady handler:
			//これが三番目に早い。
			//Domが利用できる（getElementByID()で利用できる）状態になったら発砲
			//子要素もAvailableになっている。
			e.onContentReady("contentContainer", this.fnHandler, 
                             "The onContentReady event fired for the element
                              'contentContainer'.  That element and all of its children 
                        are present in the DOM.");

			//assign onAvailable handler:
			//これが二番目に早い。
			//Domが利用できる（getElementByID()で利用できる）状態になったら発砲
			//子要素は考慮しない。
			e.onAvailable("contentContainer", this.fnHandler, 
                          "The onAvailable event fired on the element 'contentContainer'.
                        That element is present in the DOM.");

		},
		
		//we'll use this handler for onAvailable, onContentReady,
		//and onDOMReady:
		//ハンドラーを仕込む。
		fnHandler: function(message) {
			//onDOMReady uses the Custom Event signature, with the object
			//passed in as the third argument:
			if(arguments.length > 2) {
				message = arguments[2];
			}
			alert(message);
//			YAHOO.log(message, "info", "example");
			
		},

		//we'll use this handler for the page load event:
		fnLoadHandler: function(oEvent, message) {
			alert(message);
//			YAHOO.log(message, "info", "example");
		}

	}

}();

//initialize the example:
YAHOO.example.Timing.init();
</script>
</HEAD>

<BODY>

<div id="contentContainer">

// 以下は子要素の時間稼ぎ
<ul>
<li id='li-0'>child node #0</li>
<li id='li-1'>child node #1</li>
<li id='li-2'>child node #2</li>
<li id='li-3'>child node #3</li>
<li id='li-4'>child node #4</li>
<li id='li-5'>child node #5</li>
<li id='li-6'>child node #6</li>
<li id='li-7'>child node #7</li>
<li id='li-8'>child node #8</li>
<li id='li-9'>child node #9</li>

…

<li id='li-91'>child node #91</li>
<li id='li-92'>child node #92</li>
<li id='li-93'>child node #93</li>
<li id='li-94'>child node #94</li>
<li id='li-95'>child node #95</li>
<li id='li-96'>child node #96</li>
<li id='li-97'>child node #97</li>
<li id='li-98'>child node #98</li>
<li id='li-99'>child node #99</li>
</ul>

<img src="http://developer.yahoo.com/yui/docs/assets/examples/exampleimages/large/uluru.jpg" width="500" alt="Uluru" id="image" />
</div>

</body>
</HTML>

これでOK。下のようにでます。