$(document).ready() 之后会调用什么 jQuery 事件？答案

【问题标题】：What jQuery event is called right after $(document).ready()?$(document).ready() 之后会调用什么 jQuery 事件？
【发布时间】：2012-01-18 13:08:42
【问题描述】：

我在$(document).ready() 上生成了很多 HTML。我有一个简单的窗口系统。但它不仅是在 $(document).ready() 上生成的 - 还有一些 HTML 元素（不同的 JS 文件将内容放入 $(document).ready() ）。我希望在调用$(document).ready() 之后生成我的窗口系统。那么在$(document).ready()中注册的所有代码完成后如何处理要调用的函数呢？

【问题讨论】：

这是很多 $(document).ready()！ ;-)
那么，您想要一个 .ready() 用于您的 document.ready()？这不是 jQuery 的工作方式 - 与 PHP 上的 WordPress 不同，由于 JavaScript 的基于事件的模型，jQuery 无法“知道”您放入 ready() 函数的所有代码都已完成。因此，在 document.ready() 之后没有调用事件。您需要自行创建并等待事件完成，或使用 window.load()。

标签： javascript jquery html dom

【解决方案1】：

  $(window).load(function(){
   //some code after ready 
  });

【讨论】：

这里有很多关于答案的讨论。这是所提问题的确切答案。

【解决方案2】：

稍后会触发另一个事件。它是 $(window).load();在加载所有资源后触发。

但也许你想要这个：

function loadWindowSystem(){
    // load window system here
}

$(document).ready(function(){
    // do some html stuff here

    loadWindowSystem();
})

这样你可以在函数中分离你的代码。

【讨论】：

注意：window.load 在加载所有资源时触发，不仅是图像
这意味着我需要在每个使用 $(document).ready("") 生成 HTML 的文档中调用 loadWindowSystem() ......而且 .js 加载将是可以说很重要...
谢谢迪迪埃，我在回答中更改了它。
@myWallJSON 如果您想在多个文档中拥有相同的功能，只需使用一个 .js 文件并将其包含在各种文档中。

【解决方案3】：

我通常不提倡使用 setTimeout，但您可以在 @jfriend00 的答案之上创建一个更抽象的方法：

$(document).ready(function() {
    setTimeout(function() {
        $(document).trigger('afterready');
    }, 1);
});

$(document).bind('afterready', function() {
    // call your code here that you want to run after all $(document).ready() calls have run
});

【讨论】：

【解决方案4】：

如果您希望在所有 $(document).ready() 调用后立即触发某些内容，您可以将其放置在页面中的任何位置：

$(document).ready(function() {
    setTimeout(function() {
        // call your code here that you want to run after all $(document).ready() calls have run
    }, 1);
});

这将与所有其他 document.ready 调用一起被调用，但它设置了一个短暂的超时，将在所有其他 document.ready 调用完成后执行。

【讨论】：

【解决方案5】：

通过添加另一个处理函数，文档准备就绪，处理程序几乎肯定会是就绪事件队列中的最后一个。有效地为您提供即时“发布”就绪处理函数。

$(document).ready(function() {
    $(document).ready(function() {
        // code to run "after" ready 
    });
});

$(document).ready

当通过对该方法的连续调用添加多个函数时，它们会在 DOM 就绪时按照添加顺序运行。

请注意，这只有在没有其他人使用此“技巧”时才有效。

【讨论】：

【解决方案6】：

这个函数后面什么都没有，所以如果你有一些ajax加载器，你唯一能做的就是等待所有的加载器，然后开始渲染

编辑但我想知道为什么你不只是结构化你的代码来消除这个。

【讨论】：

【解决方案7】：

$(document).ready() 在 DOM 完成加载后立即调用。 pageLoad() 在 0 计时器上调用 next，但要注意它在每次部分回发后运行。

编辑：添加旁注 - 这仅在使用 ASP.NET 时才计算在内，提到的 pageLoad 功能与 jQuery 是分开的。查看更多信息Here

【讨论】：

【解决方案8】：

你可以使用

$(window).on('load', function () {
   alert("Window Loaded");
});

$(window).load(function(){
   alert("Window Loaded");
}

已从 jQuery 中删除。

【讨论】：