window.onloadよりdom:loadedを使う

JavaScript

window.onloadはページの読み込みが終了した時点でイベントが呼び出されるため、この関数内に時間がかかる処理を置くと予想以上にページの描画が終わらない場合がある。
このイベントよりもっと速くて有用なイベントとして、dom:loaded がある。これは、ブラウザがHTMLをパースしてDOMツリーを構築し終えた時点で発火するイベント。つまりこのイベント後ならば document.getElementById を行っても要素が見つかりませんエラーが出なくなる。


使い方

document.observe("dom:loaded", 
    function() {
        //logic
    });


注意点として、DOMツリーの構築が終わっていても描画が終わっていない場合があるので、このイベント内で document.getElementById('someId').style.height のようなプロパティを見ても0やnullが入っている場合がある。

描画時にスタイル関連を操作したい場合は、dom:loadedイベント内で前処理をしておき、window.onloadイベント内でスタイルを適用するという形にするのが望ましい。前処理ができるような場合に限るけど。