【javascript】DOM読み込み判定処理
以前書いた記事に間違いがったので訂正とともに再調査。
・ページを読み込んだ後にjavascript関数を実行させたい場合にonloadイベントを使用して関数を実行しようとすると画像やCSSなどの静的ファイルも読み込んでからでないと関数が実行されない。
とはいえ、setTimeoutなどを利用して遅延実行させてもDOMツリー構築前にappendChildなどのDOMツリーをいじる処理をするとエラーが発生する。
そのためJQueryなどのフレームワークではDOMツリー構築完了を検知して関数を実行するイベントdocument.ready()を用意している。
同じような機構がprototype.jsなどにもあるが、どのように検知しているのかを調べてみた。
方法は
で分かれている。
FF、opera系
DOMContentLoadedというイベントが用意されているので、これをそのまま利用すればよい。
document.readyStateがloadedかcompleteになるまでループさせる。
これはXMLHttpRequestオブジェクトのコールバック呼び出しの機構と一緒だ。
IE
今のところ二つ方法があるようだ。
pタグをcreateElementして、そのエレメントに対してscrollを実行しエラーが出たら、catchする。
エラーが出なくなったらDOMツリー準備完了という判断をしているようだ。
IEのエラーを逆手にとっているな…。
もう一つはscriptタグをdefer属性付きでcreateElmentして、scriptエレメントのreadyStateを監視する方法。
これもXMLHttpRequestのコールバック呼び出しと同じ機構。
んで、各フレームワークではIEでの判別をどっちの方法を採用しているか見てみました。
pタグエラー検知のやり方
Yahoo! User Interface (YUI) 、JQuery
scriptタグ遅延呼び出しのやり方
prototype.js、tinymce（フレームワークではないですが…）
IEについてはどっちの方法がいいんだろうか。
