隐藏的div - 减少延迟，样式显示无+ javascript

Question

我通常在我的网页上使用隐藏的div，直到需要使用javascript取消隐藏。我过去常常使用javascript进行初始隐藏，但现在转移到用css隐藏它们以保证隐藏发生（在浏览器中禁用js）。 js隐藏也存在延迟问题（等待js加载）。

我的问题是，使用css，仍然有一些延迟，所以我最终将样式包含在下面的标记中，我讨厌这样做，让我觉得我做错了什么.. < / p>

<div style="display:none;">
   content
</div>

你们经常这样做吗？有没有办法让我可以在标记的其余部分之前以某种方式加载css或js？

提前致谢

Answer 1

我可能会因此而受到打击，但在很多应用程序中，当我想避免这种延迟时，我会在内容之后立即使用内联脚本标记，如下所示：

<div id="hidden-div">
    content
</div>
<script type="text/javascript">
    $('#hidden-div').hide();
</script>

或者如果你不使用jQuery：

<div id="hidden-div">
    content
</div>
<script type="text/javascript">
    document.getElementById('hidden-div').style.display = 'none';
</script>

起初这看起来很笨拙;但是，我采用这种方法有几个原因：

1. 立即隐藏（无需等待 为整个DOM加载）
2. 禁用JavaScript的人会 仍然看到内容，而如果我们 用CSS隐藏它是没有办法的 非JS用户使其可见 试。

希望这有帮助！

Answer 2

将css包含在页面顶部的内联样式块中：

<style>
  .hidden:  { display: none; }
</style>

然后用所需的类注释你的div：

<div class="hidden"> ... </div>

这种方法的结果是，为了显示元素，您不需要将显示设置为block，您只需使用JavaScript从元素中添加/删除该类。这样做效果更好，因为并非每个元素都需要display = block（表和内联元素具有不同的显示模式）。

尽管另一张海报说过，但这并不是一种糟糕的做法。你应该将你的CSS分为表现和功能标记 - 功能一个控制诸如是否或某些东西被显示的逻辑事物，表现性的只是确定如何来显示它。将函数CSS内联以避免页面跳转是没有问题的。

Answer 3

我建议移动你的显示器：没有规则到样式表的顶部，所以它是解析的少数中的第一个或第一个，但说实话，它真的取决于你有多少http请求/媒体资源。

你可以尝试在最终的body标签之前抛出js并确保css位于顶部，隐藏这些元素的css样式表是第一个链接的。

Answer 4

取决于浏览器。 Opera，WebKit和Konqueror并行加载CSS和JavaScript（但是在应用之前加载所有CSS）。

display:none是最好的解决方案，但你可以使用直接加载页面的inline-css（就像在你的描述中一样），如果你想要格外谨慎，那就不好了。