IT技术 - jQuery 事件 .load(), .ready(), .unload() - 吾爱随笔录

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

IT技术 javascript jquery events dom

2021-03-03 00:35:06

只是一个简单的问题，对于 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() 之前执行；是execute，所以感觉真的很奇怪。现在我必须将我的代码放在 .onload() 方法中，并在 initializeCode() 之后；行，这意味着在 .ready() 块内。

由于我是 jQuery 的新手，有人可以就此向我解释更多吗？

4个回答

注意：`.load()`&`.unload()`已被弃用

$(window).load();

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

$(document).ready();

另一方面，一旦 Web 浏览器能够运行您的 JavaScript，这就会触发，这发生在解析器完成 DOM 之后。如果您想尽快执行 JavaScript，这很有用。

$(window).unload();

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

综上所述，ready() 将在 load() 之前被触发，而 unload() 将最后被触发。

$(document).ready()实际上在 DOM 完全加载后立即触发，因此您绝对可以在处理程序中处理所有 DOM。如果您想尽快执行 JavaScript，请将其放在script标题中的标记中，在任何事件处理程序之外。它会在加载和解析后立即执行，这可能会在$(document).ready()触发之前发生。

2021-05-05 00:35:06

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

document ready等待文档被初始化。

卸载好，等到文档被卸载。

顺序是：文件准备好，窗口加载，…………窗口卸载。

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

文件准备好的简写：

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

@Sarfraz...什么？他在他的帖子中明确指出“ready() 在 initializeCode() 之前执行[d]；”

2021-05-15 00:35:06

他对秩序感到困惑，ready之前应该被解雇，load但事实并非如此。他不是在问你在说什么。

2021-05-16 00:35:06

如果同时使用了两个“document.ready”变体，它们都会按照出现的顺序触发

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

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

另外，我注意到 .load 和 .ready 之间的另一个区别。我正在打开一个子窗口，当子窗口打开时我正在执行一些工作。.load 仅在我第一次打开窗口时被调用，如果我不关闭窗口，则 .load 将不会再次被调用。但是，无论是否关闭子窗口，每次都会调用 .ready 。

其它你可能感兴趣的问题

上一篇<input> 元素上的 jQuery Change 事件 - 有什么办法可以保留以前的值？下一篇循环遍历 JSON 对象列表

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

注意：.load()&.unload()已被弃用

注意：`.load()`&`.unload()`已被弃用