Javascript 跨浏览器Dom就绪

我继承了这段代码，它似乎不太理想，可能不正确，因为它在窗口和文档对象上都添加了事件侦听器。但是，除了黑莓5.0之外，它工作正常。有人能解释一下所有这些设置是否正确，或者是否有任何建议使其更好和/或更精简

        if (document.readyState === "complete") 
            callback();
        else if (document.addEventListener) 
        {
            document.addEventListener("DOMContentLoaded",callback,false);
            window.addEventListener("load",callback,false);
        }
        else if(window.attachEvent) 
        {
            document.attachEvent("onreadystatechange", callback);
            window.attachEvent("onLoad",callback);
        } else
            setTimeout(callback,2000);

就我个人而言，我会用这个

jQuery设计用于处理文档就绪状态的各种不同浏览器实现

使用jQuery，上述代码如下所示：

$(callback);

---

如果你想知道它是怎么做的，或者想知道一种方法。我建议看看迭戈·佩里尼的作品。他的工作和方法用于许多DOM库，包括jQuery。不幸的是，这家伙似乎没有得到多少赞扬。他是try/catch轮询方法的先驱者，这使得IE加入混合时跨浏览器dom加载事件成为可能

---

如果您想使用纯javascript，可以使用以下跨浏览器功能（源代码（俄语）：）

---

将所有JS放在文档末尾。这几乎是一样的。不，如果您异步加载脚本，则不是这样。如果您使用异步。您不应该使用

DOMContentLoaded

脚本，或者我建议的方式，因为执行此异步。脚本可能在触发此事件或HTML解析器到达HTML文件底部后发生。因此，只能使用

window.onload

和

xhr.onreadystatechange

——两者都是跨浏览器兼容的。关于blackberry浏览器。我对听到的关于这个浏览器的大量bug感到震惊！很确定这在blackberry 5上不起作用。不过还是要谢谢你+1因为jQuery使用的是他的作品，他应该得到一些赞扬。与我以前尝试过的其他小片段相比，这很有效。似乎是成熟的代码+1。

function bindReady(handler){
    var called = false     
    function ready() {
        if (called) return
        called = true
        handler()
    }     
    if ( document.addEventListener ) {
        document.addEventListener( "DOMContentLoaded", function(){
            ready()
        }, false )
    } else if ( document.attachEvent ) { 
        if ( document.documentElement.doScroll && window == window.top ) {
            function tryScroll(){
                if (called) return
                if (!document.body) return
                try {
                    document.documentElement.doScroll("left")
                    ready()
                } catch(e) {
                    setTimeout(tryScroll, 0)
                }
            }
            tryScroll()
        }
        document.attachEvent("onreadystatechange", function(){     
            if ( document.readyState === "complete" ) {
                ready()
            }
        })
    }
    if (window.addEventListener)
        window.addEventListener('load', ready, false)
    else if (window.attachEvent)
        window.attachEvent('onload', ready)
    /*  else  // use this 'else' statement for very old browsers :)
        window.onload=ready
    */
}
readyList = []      
function onReady(handler) {  
    if (!readyList.length) { 
        bindReady(function() { 
            for(var i=0; i<readyList.length; i++) { 
                readyList[i]() 
            } 
        }) 
    }   
    readyList.push(handler) 
}

onReady(function() {
  // ... 
})