Question

我正在使用JQuery加载页眉和页脚，如下所示。 JQuery("").load仅在代码放在相应的<div id="header">之后才有效。我想在页面的开头加载header.jsp内容可能在<head>部分，或者我希望浏览器首先下载header.jsp内容并进一步移动以便加载更快。

这种方式实际上我的身体首先显示，因为它的内容较少，然后页眉和页脚页面即将到来。我想在浏览器中一次显示完整的页面

<html>
<head>
<script type="text/javascript" src="jquery.js" ></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
    <form action="myForm">
        <div id="header" ></div>
        <script type="text/javascript">
            jQuery("#header").load('header.jsp');
        </script>
        <div>
        Body Content goes here..
        </div>

        <div id="footer" ></div>
        <script>
            jQuery("#footer").load('footer.jsp');
        </script>
    </form>

</body>
</html>

我们有什么办法可以实现这个功能。

Answer 1

$("#header").load("header.jsp").done(function(){
         $("#footer").load('footer.jsp');
}

Answer 2

您可以使用load() callback，首先加载hearder，然后加载content of page，然后加载footer，

<强> HTML

<form action="myForm">
    <div id="header" ></div>
    <div id="content">
       <!-- Body Content goes here.. -->
    </div>
    <div id="footer" ></div>
</form>

<强> SCRIPT

<script src='http://code.jquery.com/jquery-1.11.0.js'></script>
<script type="text/javascript">
   $(function(){
     jQuery("#header").load('header.jsp',function(){ // loads header first
         jQuery("#content").load('content.jsp',function(){ // then loading content
            jQuery("#footer").load('footer.jsp');// finally footer
         });
     });
   });
</script>

Answer 3

你应该试试这个：

$(function(){
     jQuery("#header").load('header.jsp',function(){ // loads header first

      jQuery("#content").load('content.jsp',function(){ // then loading content
            jQuery("#footer").load('footer.jsp');// finally footer
         });
});

Answer 4

我知道你在一年多前问过这个问题，但也许你仍然需要答案，或者它可以帮助别人:)

如果我理解正确，你试图从上到下依次加载页面，像这样： - 1.标题 - 2.内容 - 3.页脚

您希望避免在header之前加载content，并在content之前加载footer。

问题 - AJAX异步加载

这里的问题是非常常见的JavaScript / AJAX异步加载。您正在使用的$ .load（）方法实际上只是一个AJAX调用，它需要更长的时间来完成并返回您想要的数据，而不是HTML页面（content）加载。这意味着您的HTML内容将始终在这些AJAX调用完成之前加载，并返回header和footer内容。

但我认为我有一个解决方案！

解决方案

我正在调整@Rohan Kumar的回答：

<script type="text/javascript">
   $(function(){
     jQuery("#header").load('header.jsp',function(){ // loads header first
         jQuery(window).load(function(){ // then wait for `content` to load
            jQuery("#footer").load('footer.jsp');// finally footer
         });
     });
   });
</script>

由于你没有content.jsp，我建议你使用jQuery（window）.load（）;因为这应该允许内容有足够的时间来加载和填充DOM，此时它会去检索footer.jsp。让我知道它是否有效！

如何在进一步移动之前请求JQuery加载函数加载完整的页面内容

4 个答案:

问题 - AJAX异步加载

解决方案