Home > 技術 > Prototypejsのdom:loadedを検証(IEの場合)

Prototypejsのdom:loadedを検証(IEの場合)

いまさらながらPrototype.jsのdom:loadedがIEでDOMContentLoaded的な扱いになるか試してみた。
普通に使わせてもらっているから、ちゃんと動いているんだろうけど何せ擬似なDOMContentLoadedですからね。

Prototype.jsでは3960行目あたりからdom:loadedの部分になります。
んで、IE版のところは3988行目から。

こんな感じです。

scriptタグを生成して、ロードが完了したタイミングでセットされた関数をfireしています。
ここでscriptタグにはdefer属性が指定されているので、このscriptタグの中にはdocument.writeがないことを条件にしています。
つまり、この部分を遅延評価してね~という感じですね。

この遅延のタイミングがDomContentLoadedと同じ?とみなしているようです。

順番としては、

  1. ブラウザがHTMLを上から順番に評価し始める
  2. JavaScriptからscriptタグが追加されるが、defer属性が入っているのですぐに実行しない
  3. 画面全体のDomが構築される
  4. defer属性が付いていたscriptタグの中身が評価される
  5. よってこのタイミングがDom構築完了を意味する

ほんと?w
いやちゃんと動作するんだからそうなんでしょう。
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だと思ったんでしょう。

補足

IEscript要素にdefer属性をつけるとinnerHTMLに代入したscriptが実行されるという仕様がある。


via: script要素のdefer属性の実装 - Thousand Years

なんてこともあるみたいです。

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, JavaScriptな情報をあなたに

Home > 技術 > Prototypejsのdom:loadedを検証(IEの場合)

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

Page Top