如果你想支持Internet Explorer 7+（没有怪癖、兼容性和其他问题），最后一个Chrome、最后一个Safari、最后一次Firefox和没有iframes，这就足够了：

is_loaded = false
callbacks = []

loaded = ->
  is_loaded = true
  for i in [0...callbacks.length]
    callbacks[i].call document
  callbacks = []

content_loaded = ->
  document.removeEventListener "DOMContentLoaded", content_loaded, true
  loaded()

state_changed = ->
  if document.readyState is "complete"
    document.detachEvent "onreadystatechange", state_changed
    loaded()

if !!document.addEventListener
  document.addEventListener "DOMContentLoaded", content_loaded, true
else
  document.attachEvent "onreadystatechange", state_changed

dom_ready = (callback) ->
  if is_loaded
    callback.call document
  else
    callbacks.push callback

(function(f){
  if(document.readyState != "loading") f();
  else document.addEventListener("DOMContentLoaded", f);
})(function(){
  console.log("The Document is 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（警报）；

现在是2020年，＜script＞标签具有defer属性。

例如：

<script src="demo_defer.js" defer></script>

它指定当页面完成解析时执行脚本。

https://www.w3schools.com/tags/att_script_defer.asp

我最近在一个移动网站上使用这个。这是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;
})();

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

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

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