onloadイベントのdomReadyイベントを場合によっては置き換えることができます


loadイベントは、ページが完全にロードされた後(ページ内のピクチャ、flashなどのすべての要素を含む)実行を開始するため、JSがDOM操作を必要とし、ページがノードをロードしていないためエラーを引き起こすことなく、JSを安全に実行できます.しかし、このセキュリティには代価が必要です.一部の画像(または他のもの)のロードが特に遅い場合、loadイベントは長い間待ってからトリガーされます.
この問題に対して、いくつかのJSフレームワークはいくつかの補足方法を提供しています.例:jqueryの$(document).ready()、mootoolsのdomreadyイベント.いずれもページのDOMロードが完了するとすぐに実行され、長い画像ダウンロードプロセスを待つ必要はありません.
これらのフレームワークを使わなければ、どのように自分のdocument readyを実現しますか?次のコードを参照してください.


function __clear(timer){
    clearTimeout(timer);
    clearInterval(timer);
    return null;
};

function __attach_event(evt, callback) {
    if (window.addEventListener) {
        window.addEventListener(evt, callback, false); 
    } else if (window.attachEvent) {
        window.attachEvent("on" + evt, callback);
    }
}

function __domReady(f) {
    //    DOM     ,      
    if (__domReady.done) return f();
    //              
    if (__domReady.timer) {
        //             
        __domReady.ready.push(f);
    } else {
        //              ,
        //        。  addEvent(       )。
        __attach_event("load", __isDOMReady);
        //            
        __domReady.ready = [f];
        //        DOM     
        __domReady.timer = setInterval(__isDOMReady, 100);
    }
}
function __isDOMReady() {
    //         DOM   ,  
    if (__domReady.done) return false;
    //              
    if (document && document.getElementsByTagName && document.getElementById && document.body) {
        //     ,        
        __clear(__domReady.timer);
        __domReady.timer = null;
        //           
        for ( var i = 0; i < __domReady.ready.length; i++ ) {
            __domReady.ready[i]();
        }
        //           
        __domReady.ready = null;
        __domReady.done = true;
    }
}


特定の呼び出し方法:

__domReady(function() {
    alert("The dom is loaded!");
});