最小且100%工作

我已经从PlainJS中选择了答案，它对我来说很好。它扩展了DOMContentLoaded，因此它可以在所有浏览器中被接受。

此函数等效于jQuery的$（document）.ready（）方法：

document.addEventListener('DOMContentLoaded', function(){
    // do something
});

然而，与jQuery不同的是，这段代码只能在现代浏览器中正常运行（IE>8），如果在插入此脚本时（例如通过Ajax）已经呈现了文档，则无法正常运行。因此，我们需要稍微扩展一下：

function run() {
    // do something
}

// in case the document is already rendered
if (document.readyState!='loading') run();
// modern browsers
else if (document.addEventListener) 
document.addEventListener('DOMContentLoaded', run);
// IE <= 8
else document.attachEvent('onreadystatechange', function(){
    if (document.readyState=='complete') run();
});

这基本上涵盖了所有的可能性，是jQuery助手的可行替代品。

我们发现了一个快速而肮脏的跨浏览器实现，它可以用最少的实现实现大多数简单情况：

window.onReady = function onReady(fn){
    document.body ? fn() : setTimeout(function(){ onReady(fn);},50);
};

如果您正在加载BODY底部附近的jQuery，但在编写jQuery（<func>）或jQuery（document）.ready（<func>）时遇到问题，请在Github上查看jqShim。

与其重新创建自己的文档就绪函数，它只需保留这些函数，直到jQuery可用，然后按预期继续jQuery。将jQuery移动到主体底部的目的是加快页面加载速度，您仍然可以通过在模板头部内联jqShim.min.js来实现这一点。

最后我写了这段代码，将WordPress中的所有脚本都移到了页脚，而现在只有这段填充码直接位于页眉中。

我最近在一个移动网站上使用这个。这是John Resig的简化版“Pro JavaScript技术”。它取决于addEvent。

var ready = ( function () {
  function ready( f ) {
    if( ready.done ) return f();

    if( ready.timer ) {
      ready.ready.push(f);
    } else {
      addEvent( window, "load", isDOMReady );
      ready.ready = [ f ];
      ready.timer = setInterval(isDOMReady, 13);
    }
  };

  function isDOMReady() {
    if( ready.done ) return false;

    if( document && document.getElementsByTagName && document.getElementById && document.body ) {
      clearInterval( ready.timer );
      ready.timer = null;
      for( var i = 0; i < ready.ready.length; i++ ) {
        ready.ready[i]();
      }
      ready.ready = null;
      ready.done = true;
    }
  }

  return ready;
})();

一旦DOM就绪，此跨浏览器代码将调用函数：

var domReady=function(func){
    var scriptText='('+func+')();';
    var scriptElement=document.createElement('script');
    scriptElement.innerText=scriptText;
    document.body.appendChild(scriptElement);
};

以下是它的工作原理：

domReady的第一行调用函数的toString方法，以获取传入函数的字符串表示形式，并将其包装在立即调用该函数的表达式中。domReady的其余部分使用表达式创建一个脚本元素，并将其附加到文档正文中。DOM就绪后，浏览器运行附加到主体的脚本标记。

例如，如果您这样做：domReady（function（）｛alert（）；｝）；，以下内容将附加到body元素：

 <script>(function (){alert();})();</script>

注意，这只适用于用户定义的函数。以下命令不起作用：domReady（警报）；

我只使用：

setTimeout(function(){
    //reference/manipulate DOM here
});

而且与上面的答案中的document.addEventListener（“DOMContentLoaded”//等不同，它的工作时间可以追溯到IE9——http://caniuse.com/#search=DOMContentLoaded仅表示最近的IE11。

有趣的是，我在2009年偶然发现了这个setTimeout解决方案：检查DOM的准备是否过度？，我的意思是“使用各种框架的更复杂的方法来检查DOM的就绪性是否过分”。

我对这种技术为什么有效的最好解释是，当使用这样一个setTimeout的脚本到达时，DOM正处于解析过程中，因此setTimeout中的代码的执行会延迟到该操作完成。