Question

我使用jquery.load()方法将页眉和页脚调用到不同的页面。但在加载页面时，页脚和页眉有延迟。那就是我正在运行这个“我的内容..”之后，首先只显示标题。我想同时显示标题，内容，页脚加载。能帮帮我吗。

<html>
    <head>
        <script>
            $(document).ready(function() {
                $("#header").load("header.html");
                $("#footer").load("footer.html");
            });
        </script>
    </head>
    <body>
        <div id="header"></div>
        <div id="content">My content comes here...</div>
        <div id="footer"></div>
    </body>
</html>

Answer 1

虽然您可以按照Aaron H的建议使用jQuery，但将成为延迟，因为您从服务器打开三个HTTP流，一个用于正文和页眉和页脚各占一个。

更好的答案是使用服务器端包含，以便将标题，内容和页脚作为一个流传递，就像Justinas在您的问题的评论中建议的那样。

一种方法是使用PHP：

<div id="header">
<?php include "header.html"; ?></div>

同样适用于你的页脚。您必须将主文件的扩展名更改为“.php”并在服务器上启用PHP才能使其正常工作。

服务器端包含还有其他机制。最适合您的目的取决于您的Web服务器环境。

编辑添加：如果您考虑浏览器中发生的事情，它可能会帮助您解决此问题。如果使用客户端代码加载页眉和页脚，则负载不会发生，直到DOM中存在包含页眉和页脚的DIV。因为它们是“主”文档的一部分，所以在客户端没有任何东西可以在正文之前加载标题。（嗯......你可能会制作一个shell文档，并动态加载正文内容，但这真的很乱。）

另外，如果您正在使用jQuery，那么您需要转移大量的JavaScript，但却没有从中获得很多工作。这个实际上是某种服务器端包含的工作。

Answer 2

它无法在Google Chrome（本地）上运行，因此，如果您想运行此文件您可以使用 FireFox ，否则它将在服务器上运行。

添加Jquery CDN

美好的一天！

 <script type="text/javascript">
 $(document).ready(function(){
   $("#header").load("header.html");
   $("#footer").load("footer.html");
  });
 </script>
</head>
<body>
<div id="header"></div>
<div id="content">My content comes here...
</div>
<div id="footer"></div>
</body>

Answer 3

“有延迟”......

删除文档就绪包装器，这是暂停的，直到在执行加载方法之前在DOM中呈现页面为止。

现在将脚本块从HEAD移到DIV之后（就在/ BODY之前），就像在jquery API Docs中提供的这个例子一样。 http://api.jquery.com/load/

Answer 4

    setTimeout(function(){
         $('#content').load('content.php');
    },1);

setTimeout在指定的毫秒数后执行该函数。

如何使用jquery.load（）在内容之前加载页眉和页脚

4 个答案: