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会起作用。尝试。

Answer 2

您可以使用 jQuery 并通过以下方式解决此问题：

$(document).ready( function() {
   $(element).show();
});

或者

$(window).load( function() {
   $(element).show();
});

Answer 3

当您创建包装器 DIV 时，give 是一个类似于“hideMe”的类名，并且将 hideMe 定义为display:none. 当您想显示它时，请删除该类（或重新定义它）。