- 2008-01-24 (木)
- 技術
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
【関連する記事】
- キングボンビーがサイトを侵略する？jQuery Plugin - kingbonbi.js作りました
- jDropper.jsのブログパーツとBookmarklet
- jQueryのheight()やwidth()はOpera9.5に対応していない気がする
- Newer: オライリー Makerがメチャメチャ面白い
- Older: 「依存心」、ボクは「いぞんしん」と読んでました
Comments:0
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, JavaScripter Blog
