Javascript innerHTML加载缓慢

时间:2014-09-22 07:16:06

标签: javascript html

我希望每次想要进行更改时都避免在5个不同的页面上创建菜单。所以我使用Javascript在运行时重新创建菜单,这样我就可以改变那个脚本,一次性改变所有页面上的菜单(我知道,天才吧?)。

但事情就是这样;当代码按预期工作时,即使我使用window.onload调用函数,当页面的其余部分已加载时,菜单似乎首先加载。我真的不知道为什么会这样。我的猜测是innerHTML很慢,或者我在错误的时间加载脚本。

我尝试在<head>加载它,但考虑到DOM尚未存在,这没有多大意义。所以我将它移动到标题标记,这是最初的菜单代码,以便在标题执行时加载。但它的行为完全相同。

如果我进入任何其他直接用HTML编写菜单的页面,它会像页面的其余部分一样立即加载。有什么建议吗?

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);
}

1 个答案:

答案 0 :(得分:2)

右。在 其余的DOM加载后,window.onload将启动

如果您将它放在标题中,它位于DOM中,您可以删除onload事件,然后就在那里执行。这应该会使它更好。