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

【问题标题】：Includes taking a long time to load and you can see them loading包括需要很长时间才能加载，您可以看到它们正在加载
【发布时间】：2016-12-16 20:44:03
【问题描述】：

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

问题在于，当我浏览我网站上的页面时，我可以看到包含文件中的不的 HTML 首先加载。只有这样您才能看到之后加载的菜单和横幅。我希望所有内容都显示为同时加载。

这是rendered HTML。

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

<!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 移动到页面底部而不是页眉中。但到目前为止，这并没有真正改变或改善任何事情。

【问题讨论】：

您好，如果您从静态路径加载 HTML，您应该真正使用服务器端语言，例如 PHP。如果你真的需要使用 javascript，你不需要使用 doc ready。例如$(...)（简写）
@MrBizle ，是的......我在这台服务器上唯一可用的服务器端语言是 lua。我将不得不四处寻找如何将 lua 嵌入 html / 反之亦然。

标签： javascript jquery html css jquery-load

【解决方案1】：

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

如果您的包含是简单的 HTML 文件，那么您可以使用 Handlebars 或 Dust - 您只需复制代码即可，然后在 Javascript 中您只需渲染这些模板 - 请参阅文档。

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

【讨论】：

我喜欢这个主意！ +1！

【解决方案2】：

您正在使用$(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>

【讨论】：

在 head 标签下定义 div 标签很奇怪。 :)
@HareshVidja，是的，我刚刚意识到并正在修复。我只是在不知不觉中从 OP 复制过来的。

【解决方案3】：

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

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

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

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

【讨论】：

好的。我熟悉 php，但我在这个特定服务器上唯一可用的语言是 lua。将不得不找到一些资源来告诉我如何在 html 中嵌入 lua，反之亦然，我猜

【解决方案4】：

我认为它不会等待加载所有 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>

【讨论】：

这对我来说根本不起作用。没有任何内容。
请检查控制台日志...检查是否未找到错误然后检查 url 或尝试使用完整的 url。