Includes taking a long time to load and you can see them loading

I’m including one HTML file in another, as a way to reuse my header and navigation generation logic.

The trouble is that when I browse to pages on my site, I can see the HTML that isn’t included in the include files load first. Only then you can see the menus and banners load afterwards. I’d like everything to appear to load at the same time.

Here's the rendered HTML.

And here’s a code snippet showing you how I generate these pages:

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="assets/js/jquery-2.1.3.min.js"></script> 
    <script> 
    $(function(){
      $("#includeHeader").load("includes/templates/header.html");
      $("#includeNavigation").load("includes/templates/navigation.html"); 
    });
    </script>
    <div id="includeHeader"></div>
</head>

<body>

    <div id="wrapper">

        <!-- Navigation -->
        <div id="includeNavigation"></div>

I’m currently working with the code to try to move any external libraries / CSS to the bottom of the page vs. in the header. But so far, that hasn’t really changed or improved anything.

Solution

You should use one of the templating languages.

If your includes are simple HTML files then you could use Handlebars or Dust - you could just copy your code and that's it, then in Javascript you would need just render these templates - see the documentation.

You could use Jade/Pug instead, but its syntax is different from the HTML, so that's not just question of copy-paste.