Home > 技術 > jQueryのreadyメソッドはonloadイベントより前に呼ばれる

jQueryのreadyメソッドはonloadイベントより前に呼ばれる

onloadイベントとは画像のロードもすべて完了した状態を意味するようで、これだとDOMツリーの構築は終わっているのにすごい重い画像が存在する場合はすごい時間がかかってしまうイベントです。
最近だとAjaxで非同期に通信をするので、onloadイベントでこのAjax処理が呼ばれるように実装しているとユーザーが画面を触り始める後にonloadイベントが呼ばれてしまう場合があります。

たとえばウノウラボ Unoh Labs: 画像の遅延読み込みで紹介されていた遅延画像読み込みを使って、その画像が必要になったタイミングで取得するようにするのもひとつの手だと思います。

そこで今回はonloadイベントより前に実行されるDOMContentLoadedイベントなるものを調べてみました。
このイベントはMozilla系ブラウザには搭載されているのですが、IEには搭載されていないようで自作するか外部のjsを使って実装する必要があります。まぁ自作するのもいいですが、既存であるようなのでそちらを使ったほうが勉強にもなりますね。

外部のjsにはprototype.jsやjquery.jsがありますが、prototype.jsは1.6.0からこのイベントがサポートされています。そしてボクの今の開発環境は1.5.0・・・使えなかったです。
なのでjquety.jsが一番妥当なのでこちらで試してみたいと思います。

jquety.jsを使った場合はreadyメソッドを使います。documentオブジェクトを指定していますが、ここはwindowオブジェクトでもdocumentオブジェクトでも同様に動作するようです。

<script src="jquery-1.2.1.js"></script>
<script type="text/javascript">
<!--

$(document).ready(function(){
// OnLoadイベントより前に実行される
alert("DOMContentLoaded"); //1番目に呼ばれる
});


//-->
</script>

<body onload="alert('OnLoad');"> <!-- 2番目に呼ばれる -->

</body>

おお!onloadイベントより前に呼ばれています。
DOMContentLoadedイベントをサポートしていないIEやSafariでも使えるのはすごい不思議ですね。
これはJavaScriptでDOMツリーが構築されたタイミングをわざわざ取得しているようです。
$(document).ready(f)、bindReady()、$.ready() 解読でかなり細かく解説されているので是非見てみてください。
ほんとよく考えますよっ!
このイベントのおかげでますますjquery.jsを使ってみたくなりました。

次の開発からはjquery.jsをマネージャにごり押ししてみたいと思います。

■参考記事
[ThinkIT] 第2回:jQueryライブラリの内部とonloadイベント記法 (1/2)
$(document).ready(f)、bindReady()、$.ready() 解読
window.onload 前でも DOM 処理が可能なら通知してくれる domready.js - METAREAL

Trackback:0

TrackBack URL for this entry
http://hisasann.com/cgi-bin/mt/mt-tb.cgi/843
Listed below are links to weblogs that reference
jQueryのreadyメソッドはonloadイベントより前に呼ばれる from HouseTect, JavaScriptな情報をあなたに

Home > 技術 > jQueryのreadyメソッドはonloadイベントより前に呼ばれる

Tag cloud
月別アーカイブ
Powered by
Powered by
Movable Type Commercial 4.261

Page Top