导航栏加载缓慢

Question

这里是问题的示例，然而，如果您直接访问导航页面，它会立即加载。

我认为这是因为我将基础顶部栏创建在一个单独的HTML文件中，并使用此脚本进行调用所致。

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

然后，在开放的 body 标签之后

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

是否有更好的方式调用外部文件，或者我应该将导航代码分别复制到每个HTML页面中？（虽然这种做法在我想进行更改时似乎有些愚蠢）。

- Spratters53

---

我认为这是由于图像加载引起的，你能指定组件加载到页面上的顺序吗？ - BhandariS

可能是Make jquery.load happen before HTML load的重复问题。 - dting

阅读了那个问题的答案后，似乎只要脚本在 div 后面（是的），就没有什么可以做的了。然而，加载速度明显很慢（超过几秒钟），这意味着用户肯定会看到它很慢。因此，我想问是否有更好的方法将其他页面加载到已查看的页面上。 - Spratters53

Answer 1

您的代码将在整个页面加载后进行评估。 (http://www.w3schools.com/jquery/jquery_syntax.asp)

如果您希望额外的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;
?>

- Alex Tartan

---

呃，这很烦人。我试图避免使用PHP，只使用前端技术。虽然这不是致命问题，但仍然令人沮丧。 - Spratters53

也许这可以帮助你：https://dev59.com/7moy5IYBdhLWcg3wq_wk - Alex Tartan

看起来可能是对的，但当我使用它时，除了一个白色框框之外，它什么也没有显示出来。<object type="text/html" data="Navigation.html"></object> - Spratters53

我的建议是使用上面的PHP代码。既然你包含了一个样式化导航，最好保持简单。 - Alex Tartan

Answer 2

将div放在script之前，并删除如下的$(function(){});。这样做可能会稍微加快速度。

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

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

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

- taufique