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

Question

两者有什么区别

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

和

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

---

我想确保：

$(document).ready(function(){

}) 

和

$(function(){

}); 

和

jQuery(document).ready(function(){

});

都是一样的。

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

Answer 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(){
})

Answer 2

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

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

Answer 3

来自jQuery API Document

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

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

---

回答第二个问题-

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

Answer 4

这三个功能是一样的：

$(document).ready(function(){

}) 

和

$(function(){

}); 

和

jQuery(document).ready(function(){

});

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

现在不同的是

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

Answer 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
});

Answer 6

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

Answer 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"); 
});

Answer 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 中删除