$(document).ready()在准备好之前就执行了吗？

Question

$(document).ready()在准备好之前就执行了吗？

4

考虑一下我正在运行的简化版本：

<html>
   <head>
      <script src="data.js"></script>
      <script src="content.js"></script>
   </head>
   <body>
      <div id="contentGoesHere"></div>
   </body>
</html>

显然，这还有很多细节需要注意，但这是基本要点。在content.js中，我有几个函数，根据data.js中包含的json数据将标记加载到我的div中。除了这些函数之外，还有以下代码：

$(document).ready(function()
{
    loadContent();
});

实际上，所有意图都是为了使加载内容正常运行，但在该代码中调用了jquery .show()函数来显示多个div元素中的第一个div，在它们全部添加到容器元素后才会加载。但这段代码似乎没有执行，就好像这些div元素还不存在一样。因此，我尝试了延迟加载：

<html>
   <head>
      <script src="data.js"></script>
   </head>
   <body>
      <div id="contentGoesHere"></div>
   </body>
   <script src="content.js"></script>
</html>

果然，两种方法都会导致第一个面板显示。为什么延迟加载具有 $(document).ready() 函数的文件会有所不同，如果 .ready() 本来就应该等待 DOM 加载完成呢？

- AceCorban

3

在DOM准备就绪后，您正在使用JavaScript附加额外的DOM元素。 $（document）.ready（）在初始DOM加载后触发。这意味着初始请求中发送的内容。它不知道您在外部JS中动态添加的内容。 - crush

4

此外，包含在<head>部分的脚本会在<body>部分加载之前同步加载。 - crush

@crush，你应该把 ^^ 发布为答案。 - A.O.

这个主题在SO问答中有很多讨论：1，2，3。大部分都是关于性能的，但值得注意的是如果放在head中它们是同步的。 - crush

你能在 http://jsfiddle.net/ 上重现这个问题吗？ - crush

显示剩余3条评论

2个回答

0

尝试等待整个文档准备就绪，就像这样：

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

- rflmyk

谢谢你的建议，但那并没有解决问题。我认为Crush可能有一些线索。 - AceCorban

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

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

- crush · Accepted Answer

你正在DOM准备好后使用Javascript添加额外的DOM元素。$(document).ready()在初始DOM加载完成后触发，也就是发送初始请求时。它不知道你在外部Javascript中动态添加的内容。

此外，在部分包含的脚本会在部分加载之前同步加载。