包括需要很长时间才能加载，您可以看到它们正在加载

Question

我将一个 HTML 文件包含在另一个文件中，作为重用我的 header 和导航生成逻辑的一种方式。

麻烦的是，当我浏览到我网站上的页面时，我可以看到没有包含在包含文件中的 HTML 首先加载。只有这样，您才能看到随后加载的菜单和横幅。我希望所有内容都同时加载。

这里有一个代码片段向您展示了我是如何生成这些页面的：

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="assets/js/jquery-2.1.3.min.js"></script> 
    <script> 
    $(function(){
      $("#includeHeader").load("includes/templates/header.html");
      $("#includeNavigation").load("includes/templates/navigation.html"); 
    });
    </script>
    <div id="includeHeader"></div>
</head>

<body>

    <div id="wrapper">

        <!-- Navigation -->
        <div id="includeNavigation"></div>

我目前正在使用代码尝试将任何外部库/CSS 移动到页面底部而不是 header 中。但到目前为止，这并没有真正改变或改善任何东西。

Answer 1

您正在使用 $(handler) 加载它们，这是 $.ready() 的一种形式。所以它会等待文档加载所有内容，然后再加载 header.html 和 navigation.html.

尝试

  <head>
    <script src="assets/js/jquery-2.1.3.min.js"></script> 
  </head>
  <body>
    <div id="includeHeader"></div>
    <script> 
      $("#includeHeader").load("includes/templates/header.html");
      $("#includeNavigation").load("includes/templates/navigation.html"); 
    </script>
  </body>

Answer 2

您的问题是在 document.ready 事件触发之前加载函数不会运行。这可能是在您的页面开始呈现之后。要让所有内容同时出现，您可以使用 .load 的回调来显示所有内容。所以一切都被隐藏了，

$( "#result" ).load( "ajax/test.html", function() {
    /// show your stuff
});

您当然需要知道两者都已加载。

我建议不要使用 javascript 从静态路径呈现 HTML，而是使用服务器端语言来提高速度。

Answer 3

我认为它使关卡速度变快，而不是等待加载所有 dom 元素，我正在考虑 #includeNavigation 元素在 #includeHeader 元素下

  <head>
    <script src="assets/js/jquery-2.1.3.min.js"></script> 
  </head>
  <body>
    <div id="includeHeader"></div>
    <script> 
      $("#includeHeader").load("includes/templates/header.html", function(data){
          console.log("header loaded");
          $("#includeNavigation").load("includes/templates/navigation.html", function(data){
                 console.log("navigation loaded");
          }); 
      });
    </script>
  </body>

Answer 4

您应该使用其中一种模板语言。

如果您的包含文件是简单的 HTML 文件，那么您可以使用 Handlebars or Dust - 您只需复制代码即可，然后在 Javascript 中，您只需要呈现这些模板- 查看文档。

你可以用Jade/Pug代替，但它的语法与HTML不同，所以这不仅仅是复制粘贴的问题。

包括需要很长时间才能加载，您可以看到它们正在加载

Includes taking a long time to load and you can see them loading

html

javascript

css

jquery

jquery-load