考虑一下我正在运行的简化版本:
<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 加载完成呢?
$(document).ready()
在初始DOM加载后触发。这意味着初始请求中发送的内容。它不知道您在外部JS中动态添加的内容。 - crush<head>
部分的脚本会在<body>
部分加载之前同步加载。 - crush