Question

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

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

这里是What exactly is the difference between shallow copy, deepcopy and normal assignment operation?。

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

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

Answer 1

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

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

您可以使用Jade/Pug代替，但其语法与HTML不同，因此不仅仅是复制粘贴的问题。

Answer 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>

Answer 3

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

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

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

我建议不要使用javascript从静态路径渲染HTML，而是使用服务器端lang代替速度。

Answer 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>

包括花费很长时间加载，你可以看到它们加载

4 个答案: