导航栏加载较晚答案

【问题标题】：navigation bar loads late导航栏加载较晚
【发布时间】：2015-05-23 10:26:53
【问题描述】：

我认为这是因为我在单独的 html 文件中创建基础顶部栏并使用此脚本调用。

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

然后，在开始的正文标记之后

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

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

【问题讨论】：

我认为这是由于图像加载引起的，您能否指定组件加载到页面上的顺序
Make jquery.load happen before HTML load的可能重复
好吧，阅读那个答案，似乎只要脚本在 div 之后（它是），那么就没有什么可以做的了。但是，加载速度很慢（几秒钟后），这意味着用户肯定会看到它很慢。因此我问是否有更好的方法将其他页面加载到查看的页面上。

【解决方案1】：

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

$(function(){ // document-ready event
    // code is executed after the page loads
});

在 PHP 中，你可以这样做：

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

【讨论】：

【解决方案2】：

将 div 放在脚本前面，然后像下面这样去掉 $(function(){});。它可能会加快速度。

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

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

$(function(){}) 在文档准备就绪时运行。因此，一旦整个文档准备就绪，您的页面就会开始加载。您不想延迟加载Navigation.html，直到整个页面准备就绪，对吗？

【讨论】：