javascript - 使 jquery.load 在 HTML 加载之前发生

Question

我在文件中有一个 Bootstrap 导航栏，navbar.html我用 Jquery.load() 将它加载到我的 HTML 页面中

我的 HTML 页面底部有这个:

<script  type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script> 
$(function(){
   $("#navbar-partial").load("navbar.html"); 
});
</script>

和<div id="navbar-partial></div>在 HTML 页面中。

在 navbar-partial 之后，我有一个主要内容 div，其中包含页面上的所有其他内容。主要内容首先加载，然后导航栏看起来“俗气”。如果我将导航栏代码放在每个文件中，它首先加载并且看起来永远不会改变，加载速度很快，但我想将代码提取到一个文件中，这样我就不必在任何地方都对其进行编辑。

关于必须首先或更快地使导航栏部分加载的任何想法？我将脚本标签移到了头部，但这也无济于事。

谢谢

Answer 1

$(function(){ 延迟加载，直到 DOM“准备好”。

只要您的代码在它引用的 div 之后，这就会稍微加快速度:

<div id="navbar-partial></div>
<script> 
    $("#navbar-partial").load("navbar.html"); 
</script> 

你仍然依赖于加载延迟，所以不要指望奇迹:)

这个问题的正确解决方案通常是服务器端的事情，但由于您使用的是纯 HTML 文件，所以现在必须这样做。