1

down vote favorite I am trying to load a Header and Footer, but ran into a load time issue where it is loading really slow on Sharepoint, tested with WAMP and works fine. I am using

$(function(){
   $("#headerFile").load("header.html");
   $("#footerFile").load("footer.html");
});

and have tried using document.ready as well. I also want the header and footer to load before the content but if the faster load time makes that less noticeable that is fine.

  • Shouldn't you use a full directory path to the header.html and footer.html files? – Blazemonger Jan 23 '18 at 20:07
1

SharePoint uses its own body onload function called _spBodyOnLoadFunctionNames which will collide with your document.ready.

So you can do something like this

_spBodyOnLoadFunctionNames.push("myCustomFunction");
function myCustomFunction() {
   $("#headerFile").load("header.html");
   $("#footerFile").load("footer.html");
}
0

You could always wrap the whole code in a

setTimeout(function() {
*your code including header/footer*
}, 1000)

The downside is now you have to wait for 1 second before the page loads.

0

jQuery.load() is a performance hog, and using it puts you at the mercy of more network overhead. Two suggestions:

  • Put the markup directly in the master page. I have to assume you're using a custom master page since you have elements #footerFile and #headerFile. Unless you're instantiating those in jQuery as well.
  • Inject the HTML directly using .html(). $("#footerFile").html("<div>Your HTML</div>");

If you load the footer dynamically it will have to load after everything else, you you're going to see a delay no matter what you do.

Also you should by using _spBodyOnLoadFunctionNames rather as Veeraj suggests, so +1 to him.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.