2

我正在尝试将一大块 html 加载到我的 div 中，并且我遇到了 html 字符串中的 javascript 仅加载大约 50% 的时间的一些问题。

我知道我可以使用 jQuery's: $(div).html(htmlString); 将 html 加载到必要的 div 中。导致问题的 html 是在文档就绪块中完成的，我很好奇在使用 .html(..) 时是否执行了文档就绪代码，因为页面作为一个整体已经就绪，而加载的 html 内部（主要jquery-ui js）可能不是？

<html>
   <head>
     <script src="..../jquery-ui.min.js"></script>
     <script type="text/javascript"> $(function() {  $("#tabs").tabs(); }); </script>
   </head>
   <body>
      <div>......</div>
   </body>
</html>

我尝试在添加的 html 中应用超时以尝试添加 jquery-ui 脚本加载的时间：

$(function(){  setTimeout(function(){ $("#tabs").tabs(); }, 300); });

但这仍然不是 100% 可靠，因为加载必要的 javascript 所需的时间可能会有所不同。有没有办法确保加载的 html 的文档就绪状态一直等到 jquery ui 脚本加载？

4

2 回答 2

2

您应该始终将您的脚本和 js 文件放在正文的末尾。原因是任何放入头部的东西都必须在加载主体之前完成，因此将 javascript 放在那里通常是个坏主意。最好是安全的并将其添加到底部。

延迟也不会提高您在这里的机会。

<html>
  <head>
     <title>hey you</title>
  </head>
  <body>
    <div>......</div>
   <script src="..../jquery-ui.min.js"></script>
   <script type="text/javascript">
       $(function(){  
            $("#tabs").tabs(); 
       }); 
   </script>
  </body>
</html>
于 2012-07-16T16:02:45.810 回答
0

发现了这个问题，John Doe 在这个问题中的帖子有助于找到答案 - JavaScript Load Order。

jquery-ui.min.js 在 insite 脚本之后加载，无论它们在页面上的哪个位置（在头部或</body>标签之前）。我最终做的是使用检查 jquery ui$.ui并将async属性添加到 script 标签

<script async src=".../jquery-ui.min.js"></script>

加载 jquery ui 后，我就可以继续$("#tabs).tabs();通话了。

感谢您的评论和帖子！

于 2012-07-17T13:13:53.130 回答