Question

之间有什么区别

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

和

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

我想确保：

$(document).ready(function(){

})

和

$(function(){

});

和

jQuery(document).ready(function(){

});

是一样的。

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

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

查询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

就绪事件发生在加载HTML文档之后，而onload事件发生在稍后，所有内容（例如图像）也已加载。

onload事件是DOM中的标准事件，而ready事件特定于jQuery。 ready事件的目的是它应该在文档加载后尽早发生，以便为页面中的元素添加功能的代码不必等待加载所有内容。

Answer 6

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

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

Answer 8

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

$(document).ready(function(){

}) 
//and 
$(function(){

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

});

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

$（window）.load在1.8中已弃用，已在jquery 3.0中删除

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

9 个答案:

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