绘制前的 DOM Window 事件答案

【问题标题】：DOM Window event before painting绘制前的 DOM Window 事件
【发布时间】：2019-10-05 19:26:03
【问题描述】：

是否可以在加载 HTML 之后，但在实际绘制发生之前从窗口捕获事件？或者在绘制到屏幕之前访问 DOM 节点？我想在绘画之前更改元素的样式以避免视觉闪烁。

这是我得到的最接近的，但是如果您刷新页面，您可以在应用高度更改之前看到该框。

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      #container {
        width: 200px;
        height: 200px;
        border: solid;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      window.addEventListener("DOMContentLoaded", () => {
        document.getElementById("container").style.height = 0;
      });
    </script>
  </body>
</html>

【问题讨论】：

为什么不直接修改 CSS？
在CSS中设置visibility为hidden，在JS中设置高度，然后将visibility设置为visible。或使用display 与none 和block，具体取决于您的需要。你所问的没有事件。搜索“FOUC”（无样式内容的闪存）。
@jhpratt 这是我试图制作的一个 React 钩子来控制动画（其范围超出了本次对话）
感谢@HereticMonkey 的回复。我也这么认为，只是希望相反......

标签： javascript html dom events

【解决方案1】：

如果您不想弄乱 CSS，可以使用 Javascript 创建元素并同步添加。

window.addEventListener("DOMContentLoaded", () => {
  let container = document.createElement("div");

  container.id = "container";
  container.style.height = 0;
  document.body.appendChild(container);
});

【讨论】：