Javascript innerHTML is loading slowly

Question

I wanted to avoid having to make my menu on 5 different pages every time I wanted to make a change. So I used Javascript to recreate the menu at runtime, so that I can just change that script to make the menu change on all pages at once (I know, genius right?).

But here is the thing; While the code works as intended, the menu seems to first load, when the rest of the page have loaded even though I call the function with window.onload. I don't really know why that is. My guess would be that innerHTML is slow, or I load the script at the wrong time.

I tried loading it at <head> but that didn't make much sense considering the DOM doesn't exist yet. So I moved it down to the header tag, which is where the menu code originally was so that it loads when that header does. But it's the exact same behaviour.

If I enter any of the other pages where the menu is written directly in HTML, it loads right away like the rest of the page. Any suggestions?

window.onload = function () {
    var header = document.getElementById("header");
    var div = document.createElement('div');
    div.className = 'inner';

    div.innerHTML =
        '<h1><a href="-omitted-" id="logo">Dynamic Realities</a></h1>' +
        '<nav id="nav"><ul>' +
        '<li><a href="-omitted-">Home</a></li>' +
        '<li><a href="-omitted-" target="_blank">Forum</a></li><li>' +
        '<a href="-omitted-">Media</a></li>' +
        '<li><a href="-omitted-">The Team</a></li>' +
        '<li><a href="-omitted-">Open Positions</a></li></ul></nav>';
    header.appendChild(div);
}

Scimonster · Accepted Answer · 2014-09-22 07:18:09Z

2

Right. window.onload is going to fire after the rest of the DOM has been loaded.

If you're placing it in the header, where it belongs in the DOM, you can remove the onload event, and just do it right there. That should make it work better.

answered Sep 22, 2014 at 7:18

Scimonster

33.4k10 gold badges79 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

OmniOwl Over a year ago

Ah yeah, that did the trick. Is this practice considered viable? I am new at JavaScript so I don't know.

Scimonster Over a year ago

It might be better to use a server-side include, but in lieu of that, this is good.

Collectives™ on Stack Overflow

Javascript innerHTML is loading slowly

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related