$(window).load() 和 $(document).ready() 函数之间的区别答案

【问题标题】：Difference between $(window).load() and $(document).ready() functions$(window).load() 和 $(document).ready() 函数之间的区别
【发布时间】：2011-01-03 12:22:41
【问题描述】：

jQuery中$(window).load(function() {})和$(document).ready(function() {})有什么区别？

【问题讨论】：

请注意，在 jQuey 3.x 中没有$(window).load()。请改用$(window).on('load', function(){});。

标签： jquery

【解决方案1】：

document.ready 是一个 jQuery 事件，它在 DOM 准备好时运行，例如所有元素都可以找到/使用，但不一定所有内容。
window.onload 在加载图像等时稍后触发（或在最坏/失败的情况下同时触发），因此，例如，如果您使用图像尺寸，您通常希望使用它来代替.

【讨论】：

$(document).ready(function(){}) 的简写是 $(function(){})，与 window.load 的另一个重要区别是它将在函数的所有未来调用中运行，即使在初始 DOMready 之后也是如此。
@dbliss 是的，我相信 onload 是 $(window).on('load') 的简写。两者都引用 load 事件。
@MichaelButler - it will run on ALL future calls of the function 是什么意思？
@MichaelButler：您需要在评论中更加清楚。 1）你说的是用户在 DOM 准备好后执行更多的$(document).ready 代码。这是一个很小的用例，可能不值得一提它就让每个人都感到困惑。 2）当 DOM 准备好时，ENVIRONMENT 只调用一次$(document).ready(f‌unction(){})。如果用户由于某种原因在 DOM 准备好后执行了更多的$(document).ready，那么是的，它将立即执行。
我不同意，迈克尔。让我们把它留在这里，不要退化成无用的 cmets。至少困惑的人现在有了答案。

【解决方案2】：

$(document).ready(function() {
 // executes when HTML-Document is loaded and DOM is ready
 alert("document is ready");
});


$(window).load(function() {
 // executes when complete page is fully loaded, including all frames, objects and images
 alert("window is loaded");
});

【讨论】：

【解决方案3】：

$(window).load() 在 jQuery 3.0 中不可用

$( window ).load(function() {
        // Handler for .load() called.
});

要绕过它，您可以将其用作“事件处理程序附件”

$( window ).on("load", function() {
        // Handler for .load() called.
});

【讨论】：

【解决方案4】：

区别在于：

$(document).ready(function() { 是 jQuery 事件，在加载 DOM 时触发，因此在文档结构准备好时触发。

$(window).load() 事件在整个内容加载完毕后触发。

【讨论】：

【解决方案5】：

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    $( document ).ready(function() {
        alert( "document loaded" );
    });

    $( window ).load(function() {
        alert( "window loaded" );
    });
    </script>
</head>
<body>
    <iframe src="http://stackoverflow.com"></iframe>
</body>
</html>

window.load 会在所有 iframe 内容加载完毕后触发

【讨论】：

【解决方案6】：

$(document).ready 发生在所有元素都存在于 DOM 中，但不一定是所有内容时。

$(document).ready(function() {
    alert("document is ready");
});

window.onload 或 $(window).load() 在加载所有内容资源（图像等）之后发生。

$(window).load(function() {
    alert("window is loaded");
});

【讨论】：

【解决方案7】：

来自 jquery 预期 - 它只是将 load/onload 事件添加到窗口和文档。看看这个：

window.onload vs document.onload

【讨论】：

【解决方案8】：

document.ready (jQuery) document.ready 将在 HTML 文档加载属性之后立即执行，并且 DOM 准备就绪。

DOM：文档对象模型 (DOM) 是一种跨平台且独立于语言的约定，用于表示 HTML、XHTML 和 XML 文档中的对象并与之交互。

$(document).ready(function()
{
   // executes when HTML-Document is loaded and DOM is ready
   alert("(document).ready was called - document is ready!");
});

window.load（内置 JavaScript） 但是 window.load 将等待页面完全加载，这包括内框、图像等。 * window.load 是一个内置的 JavaScript 方法，已知它在旧浏览器（IE6、IE8、旧 FF 和 Opera 版本）中存在一些怪癖，但通常适用于所有浏览器。

window.load 可以像这样在 body 的 onload 事件中使用（但我强烈建议您避免在 HTML 中混合这样的代码，因为它会在以后造成混淆）：

$(window).load(function() 
{
   // executes when complete page is fully loaded, including all frames, objects and images
   alert("(window).load was called - window is loaded!");
});

【讨论】：

【解决方案9】：

$(window).load 是当 DOM 和页面上的所有内容（所有内容）（如 CSS、图像和框架）完全加载时触发的事件。一个最好的例子是，如果我们想要获取实际的图像大小或获取我们使用它的任何东西的详细信息。

$(document).ready() 表示一旦 DOM 被加载并准备好被脚本操作，其中的代码就需要执行。它不会等待图像加载来执行 jQuery 脚本。

<script type = "text/javascript">
    //$(window).load was deprecated in 1.8, and removed in jquery 3.0
    // $(window).load(function() {
    //     alert("$(window).load fired");
    // });

    $(document).ready(function() {
        alert("$(document).ready fired");
    });
</script>

$(window).load 在 $(document).ready() 之后触发。

$(window).load 在 1.8 中已弃用，并在 jquery 3.0 中删除

【讨论】：

【解决方案10】：

我认为 JQuery 3.x 不支持 $(window).load 事件

【讨论】：

根据documentation，JQuery 3.0 中删除了 $(window).load 事件
这是正确的。为了绕过它，您可以将其用作“事件处理程序附件”： $( window ).on("load", function() { // 调用 .load() 的处理程序。});

【解决方案11】：

根据 DOM 级别 2 事件，load 事件应该在 document 上触发，而不是在 window 上触发。但是，load 在所有浏览器中都在 window 上实现，以实现向后兼容性。

【讨论】：