- 2008-11-28 (金)
- 技術
いまさらながらPrototype.jsのdom:loadedがIEでDOMContentLoaded的な扱いになるか試してみた。
普通に使わせてもらっているから、ちゃんと動いているんだろうけど何せ擬似なDOMContentLoadedですからね。
Prototype.jsでは3960行目あたりからdom:loadedの部分になります。
んで、IE版のところは3988行目から。
こんな感じです。
scriptタグを生成して、ロードが完了したタイミングでセットされた関数をfireしています。
ここでscriptタグにはdefer属性が指定されているので、このscriptタグの中にはdocument.writeがないことを条件にしています。
つまり、この部分を遅延評価してね～という感じですね。
この遅延のタイミングがDomContentLoadedと同じ？とみなしているようです。
順番としては、
- ブラウザがHTMLを上から順番に評価し始める
- JavaScriptからscriptタグが追加されるが、defer属性が入っているのですぐに実行しない
- 画面全体のDomが構築される
- defer属性が付いていたscriptタグの中身が評価される
- よってこのタイミングがDom構築完了を意味する
ほんと？ｗ
いやちゃんと動作するんだからそうなんでしょう。
defer属性をこうゆう風に使うなんて、なんかとっても面白いですね。
サンプルコード
少し重めの画像を適当に用意して、さきほどの擬似DomContentLoadedとwindow.onloadの中でalertを表示されています。
これでどっちが先に呼ばれるかが重要ですね。
結果はちゃんと「dom:loaded」→「onload」の順番でした。
ただし、上の画像がない場合など比較的HTML要素が少ない場合ではonloadのほうがdom:loadedより速かったです。
なので画像を使わないテキストサイトとかだとdom:loadedを待つよりonloadを使ったほうがよさそうですね。
ちなみにjQueryのIE版DomContentLoadedは
以下のように、document.documentElement.doScroll("left")が正常に動くまで実行しています。
これを考えた人は本当にすごいですね。
IEContentLoaded - An alternative for DOMContenloaded on Internet Explorer
なぜ、document.documentElement.doScroll("left")でExceptionが発生しないとDomContentLoadedだと思ったんでしょう。
補足
IEはscript要素にdefer属性をつけるとinnerHTMLに代入したscriptが実行されるという仕様がある。
via: script要素のdefer属性の実装 - Thousand Years
なんてこともあるみたいです。
- Newer: BOSEのヘッドホンを買ってみた
- Older: FirebugのmonitorEventsでイベント丸見え
Comments:2
- monjudoh 2008-11-29 (土) 03:16
-
jQueryも1.2.1だか1.2.2だかくらいまではdefer属性付きscript要素でDomContentLoadedなタイミングを判断してました。
- Hisasann 2008-11-29 (土) 16:46
-
あっ、そうなんですか。
意外と主流なんですねwいつもコメントありがとうございます。
Trackback:0
- TrackBack URL for this entry
- http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1138
- Listed below are links to weblogs that reference
- Prototypejsのdom:loadedを検証（IEの場合） from HouseTect, JavaScripter Blog
