防止显示以编程方式附加的HTML对象，直到对象启动JS完成

prevent displaying HTML object attached programatically until the object startup JS has completed

本文关键字：对象 启动 完成 JS HTML 显示 编程 方式附      更新时间：2023-09-26

我有一个JavaScript仪表板框架，它加载HTML小部件作为对象(document.createElement)，一旦加载，在HTML小部件中执行启动JavaScript逻辑。这个仪表板的上一个版本只在IE 10/11中使用，我可以使用CSS display: hidden属性隐藏对象，直到对象完全加载并完成其启动代码，这通常会调整小部件在屏幕上的显示方式(例如。根据为小部件保存的设置更改背景颜色)。完成后，我可以将CSS显示设置更改为inline以显示小部件。

现在我正试图让这在Chrome和新的MS Edge浏览器中工作，似乎我以前依赖于IE的怪癖，因为Edge和Chrome都不允许操作对象，如果它的CSS显示属性是"无"，当它第一次加载。如果对象在加载时是可见的，这意味着最终用户看到每个小部件在加载时处于临时状态，并在JavaScript启动时"变形"到最终状态，这不是很漂亮。

我想做的是隐藏对象，直到它的启动完成。我已经尝试了相关的CSS属性的组合，如设置高度为0，显示:无和可见性:隐藏，以及调整z-索引，使对象坐在一个闪屏后面(appendChild似乎覆盖z-索引设置)。

我可以让对象自己管理它的显示，但我更愿意让仪表板框架来处理它。

任何想法我可以隐藏一个动态加载的HTML对象，直到我准备显示它(一旦所有对象加载)?我可以在仪表板中使用jQuery，但不能在对象本身(太重了)，尽管如果有一个jQuery答案，它也可以在原生JavaScript中完成(我的偏好)。请注意，该解决方案只支持现代HTML5浏览器。

(如果上面不清楚，我将设置一个小提琴)。谢谢!

绝对定位可以很好地解决这个问题。

CSS: 

.hiddenWidget {
    position: absolute;
    top: -10000px;
    left: -10000px;
}

你应该把这个类分配给新的小部件，并在它通过JS更新后删除它。

相关文章：