CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-load
Happydevdays
Happydevdays

Reputation: 2072

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.

Upvotes: 1

Views: 1066

Answers (4)

strah
strah

Reputation: 6732

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.

Upvotes: 1

Haresh Vidja
Haresh Vidja

Reputation: 8496

I think it make some level fast its not waiting for load all dom element, I am considering #includeNavigation element is under #includeHeader element

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

Upvotes: 0

MrBizle
MrBizle

Reputation: 418

Your problem is that the load function does not run until the document.ready event has fired. Which is probably after your page has started rendering. To get everything to appear at the same time you could use the callback from .load to show everything. So everything is hidden, 

$( "#result" ).load( "ajax/test.html", function() {
    /// show your stuff
});

You will of course need to know both has loaded.

I would recommend not using javascript to render HTML from a static path and would use a server side lang instead for speed.

Upvotes: 0

Ozan
Ozan

Reputation: 3739

You are using $(handler) to load them, which is a form for $.ready(). So it waits for the document to load everything before loading your header.html and navigation.html.

Try

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

Upvotes: 0

Related Questions