JavaScript innerHTML加载缓慢

Question

我想避免每次想要进行更改时都必须在5个不同的页面上进行菜单设置。 因此，我使用Javascript在运行时重新创建菜单，这样我就可以更改该脚本以一次在所有页面上更改菜单（我知道，天才吧？）。

但这是东西； 尽管代码按预期工作，但即使我使用window.onload调用了函数，页面的其余部分加载后，菜单似乎还是会首先加载。 我真的不知道为什么。 我的猜测是innerHTML速度慢，或者我在错误的时间加载了脚本。

我尝试在<head>加载它，但是考虑到DOM还不存在，这没有多大意义。 因此，我将其向下移动到header标签，该标签最初是菜单代码所在的位置，以便在该header代码加载时加载。 但这是完全相同的行为。

如果我输入菜单直接以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);
}

Answer 1

对。 DOM的其余部分加载完毕后 ， window.onload将被触发。

如果将其放置在DOM所属的标头中，则可以删除onload事件，然后就在此处进行。 那应该使它更好地工作。

JavaScript innerHTML加载缓慢

问题描述

1 个解决方案

解决方案1
2 已采纳 2014-09-22 07:18:09

JavaScript innerHTML加载缓慢

问题描述

1 个解决方案

解决方案1 2 已采纳 2014-09-22 07:18:09

解决方案1
2 已采纳 2014-09-22 07:18:09