在 jquery 中文档就绪到底意味着什么答案

【问题标题】：what exactly document-ready means in jquery在 jquery 中文档就绪到底意味着什么
【发布时间】：2012-03-19 05:53:34
【问题描述】：

假设我有一个包含 javascript 文件的 HTML 页面：

base.js 是这样的：

$(document).ready(function () {
   obj.init();
}

// ..............

var obj = {...};

令人惊讶的是，有时（并非一直如此）Firebug 在obj.init() 调用时向我显示未定义的错误！我的理解是，文档就绪意味着所有 html 元素，包括下载和执行的图像、javascript 文件（？）。

我相信为了找到这个错误的根本原因，我们需要了解“文档准备好”究竟是什么意思？有人有什么见解吗？

=============================

更新：也许我不应该在这里提及图像，我主要关心的是 javascript 文件。 “DOM 完全构造”是否包括“所有已执行的 javascript 代码”？

=============================

再次更新：这里的人们似乎同意事件“document.ready”在所有 javascript 代码下载并执行之前不会被触发。因此，问题的根本原因仍然未知。在我将 $(document).ready 块移动到 javascript 文件的底部后，我确实绕过了这个问题。

【问题讨论】：

ready !== load“文档就绪意味着所有包括图片的javascript文件下载和执行”尤其是错误的。
@mrtsherman 是对的，“文档准备就绪”取决于浏览器，而不是 JQuery。
图片不一定要加载到 document.ready 上。

标签： jquery document document-ready

【解决方案1】：

来自jQuery.ready()的文档：

虽然 JavaScript 提供了 load 事件以在页面呈现时执行代码，但在完全接收到所有资产（例如图像）之前，不会触发此事件。在大多数情况下，只要完全构建了 DOM 层次结构，就可以运行脚本。传递给 .ready() 的处理程序保证在 DOM 准备好后执行，因此这通常是附加所有其他事件处理程序并运行其他 jQuery 代码的最佳位置。使用依赖 CSS 样式属性值的脚本时，在引用脚本之前引用外部样式表或嵌入样式元素非常重要。

如果代码依赖于加载的资源（例如，如果需要图像的尺寸），则应将代码放置在 load 事件的处理程序中。

【讨论】：

“虽然 JavaScript 提供了在页面呈现时执行代码的加载事件，但在完全接收到所有资产（例如图像）之前，不会触发此事件。”。这里的“这个事件”指的是“加载”事件，而不是“就绪”事件，对吗？虽然它没有提到外部 javascript 文件..
@user1240869：是的，文档专门回答了您的问题，即“文档就绪”的确切含义以及它与加载所有文件时执行的事件有何不同。 ready 实际上是一个特定于 jQuery 的事件（如 here 解释的那样），但 onload 实际上是内置在 JavaScript 中的（参见列表 here）。 jQuery 的ready 非常接近DOMContentLoaded（参见兼容性列表）。
感谢您对“DOMContentLoaded”的引用，它回答了我在触发 document.ready 事件处理程序时关于图像、样式表加载的问题，但同样，它并没有回答我关于 javascript 代码的问题！我的理解是，在所有 javascript 代码下载并执行之前，DOM 不会完全构建！我说的对吗？
@user1240869：据了解，是的。当然，除非某些 JavaScript 由于错误而无法加载。因此，基本上，直到 JavaScript 文件停止加载（由于它们已被加载或由于它们的加载已中止），不应触发事件。
@user1240869：是的，即使文件被下载，它也不会被解析，直到 Javascript 文件被下载并执行。

【解决方案2】：

ready 事件在文档加载和解析时发生。

这包括所有 Javascript 文件，但不图像。

ready 事件在文档被解析后发生。一些浏览器对此有一个特定的事件，在其他浏览器中，jQuery 使用一个计时器来轮询文档的状态。这意味着事件会在整个文档被解析后立即发生，或者稍晚一些，具体取决于浏览器。这通常不是问题，因为它不会发生在之前文档的任何内容被解析。

如果您需要在执行某项操作之前加载所有图像，则应改用load 事件。

【讨论】：

你有任何来源支持你在这里所说的吗？例如“这包括所有 Javascript 文件，但不包括图像。”？如果我理解正确，在这种情况下，你如何解释firebug会报告变量对象的“未定义”错误？
+1 非常好的和详细的答案。这个问题还有另一个答案，也是由你 Guffa 发布的：stackoverflow.com/a/3698214/548696。 ready 只是简化了确定 DOM 准备好的时刻。

【解决方案3】：

你应该在引用它之前定义obj。

另外，document.ready 并不意味着资源会被加载，只是文档被解析，所以资源在文档就绪和$(window).load事件之间加载。

【讨论】：

obj 在 document.ready 块下定义，所以这不是问题。
$(document).ready(function () { obj.init(); }); var obj = {}; 将导致无法调用未定义的方法init，因为obj 未在您提供给jQuery 的就绪方法的函数范围内定义。如何这不是问题吗？请提供真实代码。从您的代码和报告的错误来看，您似乎误认为 document ready 是一个 DOM 事件来引用尚未在范围内定义的对象。
var obj 是在函数之外定义的，所以它是窗口对象的一部分，这就是为什么我可以在准备好的文档中引用它。
但是它定义before你引用它吗？不。之前引用它，你不会得到未定义的方法，因为对象在那个时间点不存在..假设你仍在处理“Firebug向我显示obj.init上的未定义错误（）称呼！”是错误....