Question

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

我知道我可以使用jQuery： $(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脚本加载？

Answer 1

你应该总是把你的脚本和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>

Answer 2

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

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

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

加载jquery ui后，我可以继续进行$("#tabs).tabs();调用。

感谢您的评论和帖子！

使用jquery将html字符串加载到div中

2 个答案: