jQuery事件.load()、.ready()、.unload()

Question

一个简单的问题，关于jQuery事件。在DOM加载时，.load()、.ready()和.unload()按顺序运行吗？从我看到的jQuery文档来看，答案似乎是肯定的。

<script type="text/javascript">

    $(window).load(function () {
        // run code
        initializeCode();
    });

    $(document).ready(function() {
        //run code that MUST be after initialize
    });

    $(window).unload(function() {
        Cleanup();
    });
</script>

然而，.ready() 内的代码会在 initializeCode() 执行之前执行，所以我觉得非常奇怪。现在，我必须将我的代码放在 .onload() 方法内，并且紧接着 initializeCode(); 行之后，也就是在 .ready() 块内部。请问有人能给我更多关于这个问题的解释吗？因为我是 jQuery 的新手。

- Eric

Answer 1

注意: .load() 和 .unload() 已被弃用

---

$(window).load();

当页面及其所有内容都加载完成后执行。这意味着所有图片、CSS（以及由CSS定义的内容，如自定义字体和图片）、脚本等都已加载。该事件在您的浏览器的“停止”图标变为灰色时被触发。这非常有用，可用于检测文档及其所有内容何时加载完成。

$(document).ready();

与此不同的是，只要网络浏览器能够运行您的JavaScript，这段代码就会立即执行，这是在DOM解析完成后发生的。如果您想尽快执行JavaScript，这很有用。

$(window).unload();

当你要离开页面时，此事件将被触发。这可能是刷新/F5、按上一页按钮、导航到另一个网站或关闭整个选项卡/窗口。

总之，ready()将在load()之前被触发，而unload()将是最后一个被触发的。

- Tower

---

$(document).ready()实际上是在DOM完全加载后立即触发的，因此您可以在处理程序中绝对处理DOM。如果您想尽快执行JavaScript，请将它放在标头中的script标签中，不要放在任何事件处理程序之内。它将在加载和解析后尽快执行，这可能早于$(document).ready()的触发时间。 - Simon

Answer 2

窗口加载将等待所有资源加载完成。

文档就绪 等待文档初始化。

卸载等待文档被卸载。

顺序为：文档就绪，窗口加载，... ... ... ... 窗口卸载。

除非需要等待图像加载完成，否则始终使用文档就绪。

文档就绪的简写：

$(function(){
    // yay!
});

- David Murdoch

---

他对“顺序”感到困惑，应该在“加载”之前触发“准备”，但实际上并没有。他不是在询问你所说的内容。 - Sarfraz

@Sarfraz...什么？他在帖子中明确表示，“ready()在initializeCode()之前执行；”。 - David Murdoch

Answer 3

如果同时使用"document.ready"的两种变体，它们将按照出现的顺序依次触发。

$(function(){
    alert('shorthand document.ready');
});

//try changing places
$(document).ready(function(){
    alert('document.ready');
});

- ljgww

Answer 4

此外，我注意到.load和.ready之间还有一个区别。我正在打开一个子窗口，并在子窗口打开时执行一些工作。只有在第一次打开窗口时才会调用.load，如果我不关闭窗口，则不会再次调用.load。然而，无论是否关闭子窗口，.ready都会每次被调用。

- Praveen Singh