有一个关于如何使用Javascript或Jquery检测文档是否已加载的非常好的文档。

使用本地Javascript可以实现这一点

if (document.readyState === "complete") {
 init();
 }

这也可以在区间内完成

var interval = setInterval(function() {
    if(document.readyState === 'complete') {
        clearInterval(interval);
        init();
    }    
}, 100);

由Mozilla编写

switch (document.readyState) {
  case "loading":
    // The document is still loading.
    break;
  case "interactive":
    // The document has finished loading. We can now access the DOM elements.
    var span = document.createElement("span");
    span.textContent = "A <span> element.";
    document.body.appendChild(span);
    break;
  case "complete":
    // The page is fully loaded.
    console.log("Page is loaded completely");
    break;
}

使用Jquery 仅检查DOM是否准备就绪

// A $( document ).ready() block.
$( document ).ready(function() {
    console.log( "ready!" );
});

要检查是否加载了所有资源，请使用window.load

 $( window ).load(function() {
        console.log( "window loaded" );
    });

合理的可移植，非框架的方式让你的脚本设置一个函数在加载时运行:

if(window.attachEvent) {
    window.attachEvent('onload', yourFunctionName);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function(evt) {
            curronload(evt);
            yourFunctionName(evt);
        };
        window.onload = newonload;
    } else {
        window.onload = yourFunctionName;
    }
}

使用YUI库(我喜欢它):

YAHOO.util.Event.onDOMReady(function(){
    //your code
});

便携又漂亮!然而，如果你不把YUI用于其他东西(参见它的文档)，我会说它不值得使用。

注意:要使用此代码，您需要导入2个脚本

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/event/event-min.js" ></script>

$(window).on("load", function(){ ... });

.ready()最适合我。

$(document).ready(function(){ ... });

.load()将工作，但它不会等到页面加载。

jQuery(window).load(function () { ... });

对我不起作用，破坏了下一个内联脚本。我也使用jQuery 3.2.1以及一些其他的jQuery叉子。

隐藏我的网站加载覆盖，我使用以下:

<script>
$(window).on("load", function(){
$('.loading-page').delay(3000).fadeOut(250);
});
</script>

正如Daniel所说，您可以使用document.onload。

然而，各种javascript框架(jQuery, Mootools等)使用一个自定义事件'domready'，我猜这一定是更有效的。如果你使用javascript进行开发，我强烈建议你使用框架，这将极大地提高你的工作效率。

< script type = " text / javascript " > 美元(窗口)。绑定("load"， function() { // javascript事件 })； > < /脚本