jQuery - $(document).ready 和 $(window).load 之间有啥区别？

Posted 2023-05-07

【中文标题】jQuery - $(document).ready 和 $(window).load 之间有啥区别？

【英文标题】：jQuery - What are differences between $(document).ready and $(window).load?jQuery - $(document).ready 和 $(window).load 之间有什么区别？

【发布时间】：2012-01-13 20:21:24

【问题描述】：

两者有什么区别

$(document).ready(function()
 //my code here
);

和

$(window).load(function()
  //my code here
);

---

我想确保：

$(document).ready(function()

) 

和

$(function()

); 

和

jQuery(document).ready(function()

);

都是一样的。

你能告诉我它们之间有什么不同和相似之处吗？

【问题讨论】：

window.onload vs document.ready 的可能重复项

大声笑，他在我之后从同一个链接复制（没有提及）并被接受：P 经验教训，不要向开发人员解释，他们喜欢看代码：D

@Rifat 很抱歉，但是 Oyeme 的格式更容易阅读 >_

@eureka 没关系。您不必感到抱歉 :) 我们都试图帮助您。但是，他应该提到信用：P

window.onload vs. body.onload vs. document.onready的可能重复

【参考方案1】：

$(document).ready(function() 
  // executes when html-Document is loaded and DOM is ready
  console.log("document is ready");
);


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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

查询 3.0 版本

Breaking change: .load(), .unload(), and .error() removed

这些方法是事件操作的快捷方式，但有几个 API 限制。事件 .load() 方法与 ajax .load() 冲突 方法。 .error() 方法不能与 window.onerror 一起使用 因为定义 DOM 方法的方式。如果需要附加 这些名称的事件，使用.on() 方法，例如改变 $("img").load(fn) 到 $(img).on("load", fn).¹

$(window).load(function() );

应该改为

$(window).on('load', function (e) )

这些都是等价的：

$(function()
); 

jQuery(document).ready(function()
);

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

$(document).on('ready', function()
)

【讨论】：

指向原始帖子：4loc.wordpress.com/2009/04/28/documentready-vs-windowload

后者是首选，因为其他的已弃用。此外，后者（我相信）特别允许多个处理程序，因此您可以让多个脚本都有一个 .on('ready' ...) 处理程序

.on( "ready", handler ) - 自 jQuery 1.8 起已弃用。见api.jquery.com/ready

$(document).ready和$(document).load有什么区别？

$(document).ready - “在加载 HTML 文档并且 DOM 准备就绪时执行” - 因此它将在文档加载后立即运行，而不是等待任何图片加载或帧，对象或尚未加载的任何内容。 $(document).load - “在完整页面完全加载时执行，包括所有框架、对象和图像” - 因此它将等待所有内容加载 - 文档、DOM、图像、脚本、框架、对象等等 - 然后只有这样它才会运行。

【参考方案2】：

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

还阅读了一个相关问题：Difference between $(window).load() and $(document).ready() functions

【参考方案3】：

来自jQuery API Document

虽然 javascript 提供了 load 事件来执行代码，但当 页面被渲染，直到所有资产都不会触发此事件 如图像已完全接收。在大多数情况下， 一旦 DOM 层次结构已完全运行，脚本就可以运行 建。传递给.ready() 的处理程序保证为 在 DOM 准备好之后执行，所以这通常是最好的地方 附加所有其他事件处理程序并运行其他 jQuery 代码。使用时 依赖 CSS 样式属性值的脚本，这很重要 在之前引用外部样式表或嵌入样式元素 引用脚本。

如果代码依赖于加载的资源（例如，如果 图像的尺寸是必需的），代码应放在 load 事件的处理程序。

---

回答第二个问题-

不，只要您不在无冲突模式下使用 jQuery，它们是相同的。

【参考方案4】：

这三个功能是一样的：

$(document).ready(function()

) 

和

$(function()

); 

和

jQuery(document).ready(function()

);

这里$ 用于定义jQuery，如$ = jQuery。

现在不同的是

$(document).ready 是在加载 DOM 时触发的 jQuery 事件，因此在文档结构准备好时触发。 $(window).load 事件在整个内容加载后触发，例如页面包含图像、css 等。

【参考方案5】：

$(document).ready() 和 $(window).load() 函数之间的区别在于，$(window).load() 中包含的代码将在整个页面（图像、iframe、样式表等）加载后运行，而 文档准备就绪 事件在所有图像、iframe 等加载之前触发，但在整个 DOM 本身准备好之后。

---

$(document).ready(function()

) 

和

$(function()

);

和

jQuery(document).ready(function()

);

以上3个代码没有区别。

它们是等价的，但是如果任何其他 JavaScript 框架使用相同的美元符号 $ 作为快捷方式名称，您可能会遇到冲突。

jQuery.noConflict();
jQuery.ready(function($)
 //Code using $ as alias to jQuery
);

【讨论】：

jQuery(document).ready(function() 和 jQuery(document).ready(function($) 之间的区别？注意括号内的 $ 。

【参考方案6】：

ready 事件总是在唯一的 html 页面加载到浏览器并执行函数时执行.... 但是加载事件是在所有页面内容加载到页面的浏览器时执行的...... 当我们在 jquery 脚本中使用 noconflict() 方法时，我们可以使用 $ 或 jQuery...

【参考方案7】：

$(document).ready(function(e)  
    // executes when HTML-Document is loaded and DOM is ready  
    console.log("page is loading now"); 
);

$(document).load(function(e)  
    //when html page complete loaded
    console.log("completely loaded"); 
);

【讨论】：

请解释一下你的答案。

复制自4loc.wordpress.com/2009/04/28/documentready-vs-windowload（以及接受的答案）。

【参考方案8】：

$(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() 之后触发。

$(document).ready(function()

) 
//and 
$(function()

); 
//and
jQuery(document).ready(function()

);

以上3个相同，$是jQuery的别名，如果其他JavaScript框架使用相同的美元符号$，你可能会遇到冲突。如果你遇到冲突 jQuery 团队提供解决方案no-conflict 阅读更多。

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