navigation bar loads late

Question

Here is an example of the problem however, if you go directly to the navigation page, it loads instantly.

I presume that this is caused because I am creating the foundation top-bar in a separate html file and calling using this script.

<script>
    $(function(){
        $("#includeHeader").load("Navigation.html");
    });
</script>

and then, right after the opening body tag

<div class="fixed shadow" id="includeHeader"></div>

Is there a better way to call an external file, or should I just copy the navigation code separately into each HTML page? (seems kinda stupid for when I want to make changes though).

I think this is caused due to the image loading, can you specify the order in which your components are getting loaded onto the page — BhandariS, May 23 '15 at 10:30
possible duplicate of [Make jquery.load happen before HTML load](http://stackoverflow.com/questions/26635111/make-jquery-load-happen-before-html-load) — dting, May 23 '15 at 10:30
Well reading the answer to that one, it seems that as long as the script is after the div (it is) then there's nothing which can be done. However, the loading is noticeably slow (a few seconds out) which means that users will definitely see that it's slow. Hence me asking if there's a better way to load other pages onto the viewed page. — Spratters53, May 23 '15 at 10:31

Alex Tartan · Accepted Answer · 2015-05-23T10:36:07.740

1

Your code is evaluated after the entire page loads. (http://www.w3schools.com/jquery/jquery_syntax.asp)

If you want your extra html rendered at the same time as the rest of the page, you must either copy-paste it in your page or load it's contents via a server-side language (php, for example)

$(function(){ // document-ready event
    // code is executed after the page loads
});

In PHP, you can do it like this:

<?php  
$header = file_get_contents('/path/to/header.html');
echo $header;
?>

edited May 23 '15 at 10:36

answered May 23 '15 at 10:33

Alex Tartan

6,736
10
34
45

Ughh, that's annoying. I was trying to avoid php and use only front end techniques. It's not deal-breaking though, just frustrating. – Spratters53 May 23 '15 at 10:35
maybe this can help: http://stackoverflow.com/questions/8401113/html5-include-file – Alex Tartan May 23 '15 at 10:41
That looks like it could be right, but when I use it it doesn't pull anything through, except a white box. – Spratters53 May 23 '15 at 11:13
My advice is to use the php code above. Since you're including a styled navigation, it's best to keep it simple. – Alex Tartan May 23 '15 at 11:15

score 1 · Answer 2 · answered May 23 '15 at 10:39

Put the div ahead of the script and get rid of $(function(){}); like following. It may speed things up a bit.

<div class="fixed shadow" id="includeHeader"></div>

<script>
    $("#includeHeader").load("Navigation.html");
</script>

$(function(){}) runs when document is ready. So your page starts loading once whole document is ready. You don't want to delay loading Navigation.html untill the whole page is ready, do you?

navigation bar loads late

2 Answers2