JavascriptパッケージDOMContentLoadedイベント

最近Javascriptの枠組みを書いていますが、DOMContent Loaded事件をカプセル化したばかりです.ちょっと興奮しています.開発過程で出会った原理と互換性の問題をメモして、省の忘れ物を探しています.
私達はjsコードを書く時、普通はすべてwindow.onload事件を添加して、主にDOMがロードし終わった後でgetElementByIdを使うことができるためで、getElements ByTagNameなどの方法はDOM元素を選んで操作して、しかしwindow.loadはDOM、シナリオ、CSSをロードし終わってから、最後にピクチャーをロードし終わって甚だしきにはiframeの中のすべての資源が触発されます.多くの場合、ウェブページの写真が比較的大きいです.最後の画像を待つには、この時間がかかります.jsは明らかに遅すぎます.多くの場合、ユーザーの体験に影響します.
多くのjsフレームワークにはDcument.readyの機能があります.JQueryのように.ready()の方法は、DOMでロードしたらすぐにjsコードを実行して、画像をゆっくりロードしてください.
document.readyの核心はDOMContentLoadedイベントで、firefox、chrome、opera、safari、ie 9+はいずれもaddEvent Listener(『DOMCon tent Loaded』、fn、false)を使ってイベントを結び付けることができますが、ie 6~8はDOMContentLoadedイベントをサポートしないので、ie 6～8に対応します.
資料によると、ie 6~8はdocument.onreadystatechange事件を使ってdocument.readyState状態がcompletteに等しいかどうかでDOMがロードされたかどうかを判断できます.もしページにiframeが埋め込まれていたら、ie 6~8のdocument.readyStateはiframeのすべてのリソースがロードされてからcompleになります.しかし、テストを経て、たとえページの中にiframeがなくても、readyStateがcompletteに等しい時、実際にトリガされたのはDOMContentLoadedイベントではなく、Oloadイベントです.
幸いなことに、ieは特有のdoScrroll方法があります.ページDOMがロードされていない場合、doScrroll方法を呼び出したら、エラーが発生するまでずっと間隔をおいてdoScrrollを呼び出します.ページDOMロードが完了したことを表します.画像やiframeの内容がロードされているかどうかに関わらず、この方法は有効です.
複数のjsファイルがdocument.readyイベントを結びつけられている場合、ブラウザが重複したバインディングを防止するために、同時に秩序よく実行するために、イベントキューメカニズムを導入して解決することができる.
以上がdocument.ready事件の原理と互換性の問題です.以下に例示的なコードを貼って、実行過程を分かりやすくするために、関数パッケージのモードを使って、実行過程は全部注釈に書いています.

//  domReady     
eventQueue = [];
 
//  DOM      
isReady = false;
 
//  DOMReady    
isBind = false;
 
/*  domReady()
 *
 *@param    {function}
 *@execute               ,   DOMContentLoaded
 *            DOM      ，     
 *@caller
 */
function domReady(fn){
    if (isReady) {
        fn.call(window);
    }
    else{
        eventQueue.push(fn);
    };
 
    bindReady();
};
 
/*domReady    
 *
 *@param    null
 *@execute         addEvListener  DOMContentLoaded,  ie9+
            ie6-8    doScroll  DOM      
 *@caller   domReady()
 */
function bindReady(){
    if (isReady) return;
    if (isBind) return;
    isBind = true;
 
    if (window.addEventListener) {
        document.addEventListener('DOMContentLoaded',execFn,false);
    }
    else if (window.attachEvent) {
        doScroll();
    };
};
 
/*doScroll  ie6-8 DOM      
 *
 *@param    null
 *@execute  doScroll  DOM      
 *@caller   bindReady()
 */
function doScroll(){
    try{
        document.documentElement.doScroll('left');
    }
    catch(error){
        return setTimeout(doScroll,20);
    };
    execFn();
};
 
/*      
 *
 *@param    null
 *@execute                
 *@caller   bindReady()
 */
function execFn(){
    if (!isReady) {
        isReady = true;
        for (var i = 0; i  
  
    ：           ，onload           js，DOMContentLoaded    DOM       js。    firebug      ，                。