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

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

本文关键字：加载 他们 长时间 包括花      更新时间：2023-09-26

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

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

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

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

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

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

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

您的问题是加载函数直到文档才运行。Ready事件已触发。这可能是在页面开始呈现之后。为了让所有内容同时显示，您可以使用.load的回调来显示所有内容。所以一切都被隐藏了，

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

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

我建议不要使用javascript从静态路径呈现HTML，而应该使用服务器端lang来代替，以提高速度。

我认为它使一些水平快，它不等待加载所有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>
相关文章：