包括需要很长时间才能加载，您可以看到它们正在加载
Posted
技术标签:
【中文标题】包括需要很长时间才能加载，您可以看到它们正在加载【英文标题】：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 / 反之亦然。
【参考方案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。以上是关于包括需要很长时间才能加载，您可以看到它们正在加载的主要内容，如果未能解决你的问题，请参考以下文章