jquery - `$(window).load(function(){})` 和 `$(function(){})` 有什么区别

Question

我一直在$(window).load(function(){});为我的项目使用，直到在某个地方我看到有人说我们可以使用$(function(){});它们并且它们的性能相同。
但是现在我有了更多的经验，我注意到它们并不相同。我注意到第一段代码在第二段代码之后一点点出现。
我只想知道有什么区别？

Answer 1

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

将等到加载文档（加载 DOM 树）而不是加载整个窗口。例如，它不会等待图像、css 或 javascript 完全加载。一旦 DOM 加载了所有 HTML 组件和事件处理程序，文档就可以被处理，然后 $(document).ready() 将完成

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

这将等待加载整个窗口。加载整个页面后，只有 $(window).load() 完成。因此，显然 $(document).ready(function(){}) 在 $(window).load() 之前完成，因为填充组件（如图像、css）需要更多时间，然后才加载 DOM 树。

所以$(function(){});不能用来代替$(window).load(function(){});

Answer 2

来自jQuery 文档本身。

大多数 Javascript 程序员最终做的第一件事就是在他们的程序中添加一些代码，类似于：

window.onload = function(){ alert("welcome"); }

其中是您要在页面加载时立即运行的代码。然而，有问题的是，直到所有图像下载完成（这包括横幅广告），Javascript 代码才会运行。首先使用 window.onload 的原因是，当您第一次尝试运行代码时，HTML“文档”还没有完成加载。

为了避免这两个问题，jQuery 有一个简单的语句来检查文档并等待它准备好被操作，称为就绪事件：

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

现在，

$(window).load(function(){}); 等于window.onload = function(){ alert("welcome"); }

而且，$(function(){}); 是一个捷径$(document).ready(function(){ });

我认为，这清除了一切:)

Answer 3

$(window).load根据我的经验，等到包括图像在内的所有内容都加载完毕后再运行 where as$(function() {});具有相同的行为$(document).ready(function() {});

如果我错了，请有人纠正我。

Answer 4

第二个是/是 的快捷方式$(document).ready()，它应该在window's load 事件之前运行。

请注意，这$(document).ready()是绑定要document加载的内容的首选方式；还有其他几种方法可以做到这一点，就像你展示的那样，但这是首选。