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 版本

重大更改：删除了 .load((、.unload(( 和 .error((

这些方法是事件操作的快捷方式，但有几个 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稍后(或在最坏/失败的情况下同时触发(加载图像等。因此，例如，如果您使用图像尺寸，则通常希望改用它。

另请阅读相关问题：
$(window(.load(( 和 $(document(.ready(( 函数之间的区别

Answer 3

这三个函数是相同的：

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

和

$(function(){
}); 

和

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

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

现在不同的是

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

Answer 4

来自 jQuery API 文档

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

在代码依赖于加载的资产的情况下(例如，如果 图像的尺寸是必需的(，代码应放置在 改为load事件的处理程序。

---

回答第二个问题——

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

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

$(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 7

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

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团队提供无冲突的解决方案 阅读更多。

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