如果jQuery脚本在页面HTML加载完成后加载，它们是否仍需要$(document).ready？

Question

如果jQuery脚本在页面HTML加载完成后加载，它们是否仍需要$(document).ready？

jqueryperformancefooter

19

如果我的jQuery脚本放置在页面所有HTML代码的下方，我是否仍需要等待$(document).ready才能使用jQuery来查找页面元素？

- Kevin Burke

1

“从技术上讲”，是的——但“实际上”不是这样。这是浏览器多年来始终如一的（未定义的）行为。然而，我相信在IE中可能有一些关于ready和帧的魔法……脚本仍应该位于body标签内部。 - user166390

此外，“footer”是指<footer>还是在<body>末尾或其他什么？ - user166390

1

可能是重复的问题：jquery - Is $(document).ready necessary? - Ciro Santilli OurBigBook.com

3个回答

5

如果脚本放在与DOM元素之下，与页面上的DOM元素交互的代码不需要$(document).ready。

最好的做法是将它们放在结束标签</body>之前。

- luke2012

HTML 标签只有 head 和 body 两个有效的子节点，因此我认为将脚本标签放在闭合的 body 标签内不仅是良好的实践，而且可以避免解析器对无效的 HTML 的奇怪行为。 - Hazza

1

您不需要使用jQuery的ready函数，但是您的代码必须考虑到这一点。任何基于click或其他绑定的处理程序可能无法正确附加到选择器，但是像live和$.ajax这样的处理程序可以按预期工作。

在使用脚本加载器或AMD时要小心使用此方法。 jQuery 必须可用，并且在加载时必须阻止。在中加载jQuery和其他依赖项。

这种技术的一个很好的例子描述了不必使用它来使jQuery正常工作（不一定是关于在页脚中使用）：

http://encosia.com/dont-let-jquerys-document-ready-slow-you-down/

- philwinkle

（该链接讨论了在HEAD位置使用脚本，而不是FOOT位置。） - user166390

在执行之前，它可以适用于DOM中可用的任何内容。通过任何方式加载的后续内容，例如ajax或在后续文档更改中添加的内容，都不会被jQuery的“click”所捕获。 - philwinkle

但是ready如何解决这个问题（在FOOT位置脚本上）？ - user166390

在这些示例中，它们使用的是 live 和 ajax，而不是依赖于 DOM。我会更新文章。 - philwinkle

@pst ready 是一个事件，告诉浏览器在 dom 加载完成之后再运行脚本。如果它在 head 中，它将不会在整个 body 加载完成之前运行。 - Yamiko

@yamikoWebs 是的，但这个问题特别涉及到FOOT位置（在所有内容之后）的脚本。我不确定它是否明确要求位于<footer>位置的脚本，但同样适用：在这个时候DOM已经有了完整的创建机会（就它已被读取而言）。所有我所知道的现代浏览器都会确保这种序列化顺序和DOM可见性，尽管我不确定根据W3C的出版物/草案是否“定义良好”。 - user166390

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Yamiko · Accepted Answer

不需要，因为文档已经加载完成。DOM 自上而下加载。我个人喜欢把所有的 JS 放在页面底部而不是 head 中。

但是这只是一行代码，我建议使用它来确保安全。你甚至可以让它更短。$(function() {} 等同于 $(document).ready(function(){})。