Question

我在文件navbar.html中有一个引导导航栏，然后将其加载到我的HTML页面Jquery.load()

我在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准备好＆＃34;。

只要您的代码在之后引用它就会加快速度：

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

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

这个问题的正确解决方案通常是服务器端的事情，但是当你使用普通的HTML文件时，现在必须这样做。

Answer 2

我不确定这是获得部分菜单的最佳方式。

但要提前加载，只需删除准备好的＆＃39;一部分。

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

并将其放在HTML中的＃navbar-partial元素中，它将起作用。

但我建议您使用服务器端包含，AFAIK大多数Web服务器都支持。那么你需要的就是这样的东西

<!--#include virtual="navbar.html" -->

您可以在此处详细了解它们：http://www.ssi.su/#include

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

2 个答案: