javascript - 从 javascript 文件加载 css 时，我应该如何在加载 css 文件之前隐藏 html 输出？

Question

当 javascript 创建包含我所有输出的父 div 时，我使用 element.style.display = 'none' 隐藏它。出于性能目的，我认为让我的插件 (javascript) 在开始时加载 css 文件是最快的方法。然后 css 将在加载后再次使父 div 可见。但是，如果在创建 div 之前加载 css 文件，那么当它到达代码中的那一点时，javascript 不会仍然隐藏它吗？在这里使用 !important 标签似乎很便宜。或者，在创建 div 之后加载 css 文件只会意味着输出需要更长的时间才能显示给用户。我想知道是否有解决此问题的标准解决方案，但一直找不到。谢谢!

Answer 1

<style>
   body { display: none; }
</style>
<script>
   window.onload = function(){ document.body.style.display = null; }
</script>

您可能会检查是否加载了 CSS 链接引用，这是更高级别的，但我推荐 David Flanagan 的 JavaScript 书。

更好的方法是使用纯 CSS - 它会自动发生并且不会等待文档加载。

<style>
   body { display: none; }
</style>
<link rel="stylesheet" href="some.css">

在some.css 文件中:

body { display: inherit; }

不确定 inherit，也许 block 会起作用。尝试。