$（document）.ready等同于没有jQuery

(function(f){
  if(document.readyState != "loading") f();
  else document.addEventListener("DOMContentLoaded", f);
})(function(){
  console.log("The Document is ready");
});

如果要在BODY底部附近加载jQuery，但是在写出jQuery（<func>）或jQuery（document）.ready（<func>）的代码上遇到麻烦，请在Github上查看jqShim。

与其重新创建自己的文档就绪功能，不如直接保留这些功能，直到jQuery可用，然后按预期使用jQuery。将jQuery移到正文底部的目的是加快页面加载速度，您仍然可以通过在模板头部内联jqShim.min.js来实现。

我最终编写了这段代码，以使WordPress中的所有脚本都移到页脚，而现在，此填充代码直接位于页眉中。

尝试这个：

function ready(callback){
    if(typeof callback === "function"){
        document.addEventListener("DOMContentLoaded", callback);
        window.addEventListener("load", callback);
    }else{
        throw new Error("Sorry, I can not run this!");
    }
}
ready(function(){
    console.log("It worked!");
});

如果您不必支持非常老的浏览器，即使您的外部脚本加载了async属性，也可以使用以下方法：

HTMLDocument.prototype.ready = new Promise(function(resolve) {
   if(document.readyState != "loading")
      resolve();
   else
      document.addEventListener("DOMContentLoaded", function() {
         resolve();
      });
});

document.ready.then(function() {
   console.log("document.ready");
});

我们发现我们的快速跨浏览器实现可以在最简单的情况下以最少的实现实现成功：

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

这里介绍的setTimeout / setInterval解决方案仅在特定情况下有效。

尤其是在Internet Explorer 8以前的版本中，尤其是在出现此问题时。

影响这些setTimeout / setInterval解决方案成功的变量是：

1) dynamic or static HTML
2) cached or non cached requests
3) size of the complete HTML document
4) chunked or non chunked transfer encoding

解决此特定问题的原始（本地Javascript）代码如下：

https://github.com/dperini/ContentLoaded
http://javascript.nwbox.com/ContentLoaded (test)

这是jQuery团队用来构建其实现的代码。

只需将其添加到HTML页面的底部...

<script>
    Your_Function();
</script>

因为，HTML文档是由上至下解析的。

jQuery答案对我来说非常有用。有了一点重构，就很好地满足了我的需求。希望对其他人有帮助。

function onReady ( callback ){
    var addListener = document.addEventListener || document.attachEvent,
        removeListener =  document.removeEventListener || document.detachEvent
        eventName = document.addEventListener ? "DOMContentLoaded" : "onreadystatechange"

    addListener.call(document, eventName, function(){
        removeListener( eventName, arguments.callee, false )
        callback()
    }, false )
}

我最近在移动网站上使用了它。这是John Resig的“ Pro JavaScript Techniques”的简化版本。这取决于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;
})();

跨浏览器（也是旧的浏览器）和一个简单的解决方案：

var docLoaded = setInterval(function () {
    if(document.readyState !== "complete") return;
    clearInterval(docLoaded);

    /*
        Your code goes here i.e. init()
    */
}, 30);

在jsfiddle中显示警报

穷人的解决方案：

var checkLoad = function() {   
    document.readyState !== "complete" ? setTimeout(checkLoad, 11) : alert("loaded!");   
};  

checkLoad();  

查看小提琴

添加了这一点，我想更好一点，自己的范围，并且非递归

(function(){
    var tId = setInterval(function() {
        if (document.readyState == "complete") onComplete()
    }, 11);
    function onComplete(){
        clearInterval(tId);    
        alert("loaded!");    
    };
})()

查看小提琴

我用这个：

document.addEventListener("DOMContentLoaded", function(event) { 
    //Do work
});

注意：这可能仅适用于较新的浏览器，尤其是以下浏览器：http : //caniuse.com/#feat=domcontentloaded

确实，如果仅关心Internet Explorer 9+，那么此代码足以替换jQuery.ready：

    document.addEventListener("DOMContentLoaded", callback);

如果您担心Internet Explorer 6和某些真正奇怪且稀有的浏览器，则可以使用：

domReady: function (callback) {
    // Mozilla, Opera and WebKit
    if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded", callback, false);
        // If Internet Explorer, the event model is used
    } else if (document.attachEvent) {
        document.attachEvent("onreadystatechange", function() {
            if (document.readyState === "complete" ) {
                callback();
            }
        });
        // A fallback to window.onload, that will always work
    } else {
        var oldOnload = window.onload;
        window.onload = function () {
            oldOnload && oldOnload();
            callback();
        }
    }
},

将您的<script>/*JavaScript code*/</script>权利放在结束 </body>标记之前。

诚然，这可能不适合每个人的目的，因为它需要更改HTML文件，而不是仅在JavaScript文件中做一些事情document.ready，但是仍然...

有一个基于标准的替代品，尽管IE8不DOMContentLoaded支持，但超过98％的浏览器都支持它：

document.addEventListener("DOMContentLoaded", function(event) { 
  //do work
});

jQuery的本机功能比window.onload复杂得多，如下所示。

function bindReady(){
    if ( readyBound ) return;
    readyBound = true;

    // Mozilla, Opera and webkit nightlies currently support this event
    if ( document.addEventListener ) {
        // Use the handy event callback
        document.addEventListener( "DOMContentLoaded", function(){
            document.removeEventListener( "DOMContentLoaded", arguments.callee, false );
            jQuery.ready();
        }, false );

    // If IE event model is used
    } else if ( document.attachEvent ) {
        // ensure firing before onload,
        // maybe late but safe also for iframes
        document.attachEvent("onreadystatechange", function(){
            if ( document.readyState === "complete" ) {
                document.detachEvent( "onreadystatechange", arguments.callee );
                jQuery.ready();
            }
        });

        // If IE and not an iframe
        // continually check to see if the document is ready
        if ( document.documentElement.doScroll && window == window.top ) (function(){
            if ( jQuery.isReady ) return;

            try {
                // If IE is used, use the trick by Diego Perini
                // http://javascript.nwbox.com/IEContentLoaded/
                document.documentElement.doScroll("left");
            } catch( error ) {
                setTimeout( arguments.callee, 0 );
                return;
            }

            // and execute any waiting functions
            jQuery.ready();
        })();
    }

    // A fallback to window.onload, that will always work
    jQuery.event.add( window, "load", jQuery.ready );
}