SQLの窓 イラストAC フリー素材

2012年05月07日

jQuery の .ready( handler ) メソッドの内部事情

※ jQuery JavaScript Library v1.7.2 の中から。

正式ドキュメントでも、『the selector can be omitted』と書かれていますが、$() の かっこの中は、function 以外はなんでも良いみたいです。ドキュメントそのものでは3通りの書き方を示してはいますが、ソースの中では  function のみがこの目的の為の『セレクタ』として機能しています。
		// HANDLE: $(function)
		// Shortcut for document ready
		} else if ( jQuery.isFunction( selector ) ) {
			return rootjQuery.ready( selector );
		}

$(document).ready(handler)
$().ready(handler) (this is not recommended)
$(handler)


これらの3通りの書き方は、2番目は "" でも null でも 未定義でも同じ結果となりますし、ソースコード上では違うところへ分岐しますが、document でも、windows でも結局は .ready メソッドを使った場合は結果は同じです。

後、 $(document).bind("ready", handler) に関しては、既に ready イベントが実行されてしまっていた場合は動作しないとあります。仕様上の意味は解りませんが、わざわざ使う構文でも無いと思います。やはりもっとも解りやすく正当なのは $(handler) だと思います。
( 3つの記法では、document.readyState === "complete" で即呼び出すようです。あと、load イベントの保険もあるみたいです / A fallback to window.onload, that will always work )

ready イベントの中身は、Mozilla, Opera and webkit nightlies currently support this event という但し書きで、DOMContentLoaded イベントを使用するとあり、IE の場合は同等のイベント(onreadystatechange)を実装してあります。・・・この詳細を読むと相当 IE はきかん坊のようです。
※ document.attachEvent で判断しているので、実際は、IE8 以前用の記述だとは思います 

具体的な意味

.ready() の意味は、load イベントがページがレンダリングされた後に実行されるイベントであるのに対して(画像などのすべての資産を完全に受信されるまで、このイベントがトリガされない)、DOMの階層構造が完全に構築された時に実行することができます。但し、CSSスタイルプロパティの値に依存するスクリプトを使用する際には、スクリプトを参照する前に外部スタイルシートまたは埋め込​​みスタイルの要素を先に参照することが重要だそうです。


.ready() 原文


【jQueryの最新記事】
posted by at 2012-05-07 21:29 | Comment(0) | jQuery | このブログの読者になる | 更新情報をチェックする
SQLの窓全体の検索
Custom Search
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。


Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX