Question

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

<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加载了呢？

Answer 1

在DOM准备好之后，您将使用Javascript追加额外的DOM元素。加载初始DOM后，$(document).ready()将触发。这意味着初始请求中发送的内容。它不知道您在外部Javascript中的动态追加。

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

Answer 2

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

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

$（document）.ready（）在准备好之前执行？

2 个答案: