Javascript 导航栏加载延迟

然而，如果你去，它会立即加载

我假定这是因为我在一个单独的HTML文件中创建了基础顶条，并使用这个脚本调用。

<script>
    $(function(){
        $("#includeHeader").load("Navigation.html");
    });
</script>

$（函数（）{
$（“#includeHeader”）.load（“Navigation.html”）；
});

然后，就在开头的body标签之后

<div class="fixed shadow" id="includeHeader"></div>

---

有没有更好的方法调用外部文件，或者我应该将导航代码单独复制到每个HTML页面中？（当我想进行更改时，这似乎有点愚蠢）。

在加载整个页面后，将对代码进行评估。（）

如果您希望额外的html与页面的其余部分同时呈现，则必须将其复制粘贴到页面中，或通过服务器端语言（例如php）加载其内容

在PHP中，您可以这样做：

<?php  
$header = file_get_contents('/path/to/header.html');
echo $header;
?>

---

将div放在脚本前面，去掉

$（function（）{}）如下所示。这可能会使事情加快一点

<div class="fixed shadow" id="includeHeader"></div>

<script>
    $("#includeHeader").load("Navigation.html");
</script>


$（“#includeHeader”）.load（“Navigation.html”）；

$（function（）{}）
在文档准备就绪时运行。所以，一旦整个文档准备就绪，页面就开始加载。您不想延迟加载
Navigation.html
直到整个页面准备就绪，是吗？
我认为这是由于图像加载造成的，您可以指定组件加载到页面的顺序吗？可以重复阅读该页面的答案，似乎只要脚本位于div之后（是的）那么就什么也做不了了。但是，加载速度明显很慢（几秒钟后）这意味着用户肯定会看到它的速度很慢。因此，我问是否有更好的方法将其他页面加载到已浏览的页面上。啊，这很烦人。我试图避免使用php，只使用前端技术。这并不是破坏交易，只是令人沮丧。也许这会有所帮助：看起来它可能是对的，但当我使用它时除了一个白色的框之外，没有任何东西可以通过。我的建议是使用上面的php代码。因为您包含了一个样式化的导航，所以最好保持简单。
<div class="fixed shadow" id="includeHeader"></div>

<script>
    $("#includeHeader").load("Navigation.html");
</script>