CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
NorCalKnockOut
NorCalKnockOut

Reputation: 878

Make jquery.load happen before HTML load

I have a bootstrap navbar in a file, navbar.html and I load it into my HTML page with Jquery.load()

I have this at the bottom of my HTML page:

<script  type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script> 
$(function(){
   $("#navbar-partial").load("navbar.html"); 
});
</script>

and <div id="navbar-partial></div> is in the HTML page.

After the navbar-partial I have a main-content div with everything else on the page. The main-content loads first, and then the navbar does which looks "tacky". If i put the navbar code in every file it loads first and appears to never change, loads fast, but I want to extract the code into one file so I dont have to edit it everywhere.

Any ideas on have to make the navbar-partial load first or faster? I moved the script tags into the head and that didnt help either.

Thanks

Upvotes: 2

Views: 2873

Answers (2)

Johan Bergstr&#246;m
Johan Bergstr&#246;m

Reputation: 11

I'm not sure this is the best way of having a partial menu.

But to make it load earlier, just remove the 'dom ready' part.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>$("#navbar-partial").load("navbar.html");</script>

And put that inside the #navbar-partial element in your HTML, and it will work.

I would however suggest that you look in to using a server side include, which AFAIK most web servers support. then all you'd need is something like this

<!--#include virtual="navbar.html" -->

You can read more about them here: http://www.ssi.su/#include

Upvotes: 1

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93561

The $(function(){ delays the load until the DOM is "ready".

So long as your code comes after the div it references this will speed things up a little:

<div id="navbar-partial></div>
<script> 
    $("#navbar-partial").load("navbar.html"); 
</script>

You are still dependent on the loading delay, so do not expect miracles :)

The proper solution to this problem is normally a server-side thing, but as you are using plain HTML files, this will have to do for now.

Upvotes: 3

Related Questions