Skip to content Skip to sidebar Skip to footer
Home / Html / Jquery

How To Load Header And Footer Before The Content Using Jquery.load()

Post a Comment
I am calling header and footer into different pages using jquery.load() method. but on loading the page the footer and header s having a delay. that is when i'm running this 'my co

Solution 1:

It will Not Work on Google Chrome(Local), So If you Want Run This File You Can use FireFox Otherwise it will Work on server.

Add Jquery CDN

Good Day!

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


Solution 2:

Although you might be able to make this work with jQuery by following the advice of Aaron H, there will be a delay because you are opening three HTTP streams from the server, one for the body and one each for header and footer.

A far better answer is to use a server-side include so that header, content, and footer are delivered as one stream, as Justinas has suggested in the comment to your question.

One way to do this is with PHP:

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

And similarly for your footer. You'll have to change the extension of your main file to ".php" and have PHP enabled on your server for this to work.

There are other mechanisms for server-side includes. The best one for your purposes depends on your web server environment.

Edited to add: It may help you work through this problem if you think about what's going on in the browser. If you are loading your header and footer using client-side code, the load cannot happen until the DIVs that will hold header and footer are present in the DOM. Since they're part of the "main" document, there is nothing you can do at the client that will make header load before body. (Well... you could probably make a shell document, and load body content dynamically, too, but that's really a mess.)

Also, if that's all you're using jQuery for, you're transferring a lot of JavaScript but not getting very much work out of it. This one really is a job for some kind of server-side include.


Solution 3:

"having a delay"...

remove the document ready wrapper, this is pausing until your page is rendered in the DOM before executing your load methods.

Now move the script block from HEAD to after your DIV's (just before /BODY), like in this example provided in the jquery API Docs.. http://api.jquery.com/load/


Solution 4: 

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

setTimeout executes the function after specified number of milliseconds.


Post a Comment for "How To Load Header And Footer Before The Content Using Jquery.load()"