在对象启动 JS 完成之前，阻止以编程方式显示 HTML 对象

Question

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

现在我正试图让它在 Chrome 和新的 MS Edge 浏览器中工作，而且我以前似乎依赖于 IE 怪癖，因为 Edge 和 Chrome 都不会'如果首次加载时其 CSS 显示属性为 'none'，则不允许操作该对象。如果对象在加载时可见，这意味着最终用户看到每个小部件都处于短暂状态，并且 'morph' 在启动时 JavaScript 是运行的最终状态，这并不漂亮.

我想做的是隐藏对象，直到它启动完成。我尝试了相关 CSS 属性的组合，例如将高度设置为 0、显示：none 和可见性：隐藏，以及调整 z-index 以便对象位于启动画面后面（appendChild 似乎覆盖 z-index 设置）。

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

有什么想法可以隐藏动态加载的 HTML 对象，直到我准备好显示它（一旦所有对象都加载完毕）？我可以在仪表板中使用 jQuery，但不能在对象本身中使用（太重），尽管如果有 jQuery 答案，它也可以在本机 JavaScript 中完成（我的偏好）。请注意，该解决方案仅支持现代 HTML5 浏览器。

（如果以上不清楚我会设置一个fiddle）。谢谢！

Answer 1

使用绝对定位可以很好地管理这一点。

CSS:

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

您可以将此 class 分配给新的小部件，并在通过 JS 更新后将其删除。

在对象启动 JS 完成之前，阻止以编程方式显示 HTML 对象

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

html

javascript

css

google-chrome

microsoft-edge