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

【问题标题】：Hidden divs - reducing latency with style display none + javascript隐藏的 div - 减少延迟与样式显示无 + javascript
【发布时间】：2009-10-06 22:28:47
【问题描述】：

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

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

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

你们多久做一次？有没有办法让 css 或 js 在其余标记之前以某种方式加载？

提前致谢

【问题讨论】：

您是否将指向外部 CSS 文件的链接放在 head 元素中？

标签： javascript css hidden

【解决方案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>

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

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

希望这会有所帮助！

【讨论】：

【解决方案2】：

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

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

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

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

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

尽管另一张海报说了什么，但这并不是坏习惯。您应该将您的 CSS 分为表现性标记和功能性标记 - 功能性标记控制诸如是否显示或不显示某些东西等逻辑事物，表现性标记仅决定如何显示它。将功能性 CSS 内联以避免页面跳转没有问题。

【讨论】：

我更倾向于这个答案。我确实使用了 class="hidden" 的想法，并通过使用 js 添加/删除类来进行稍后的隐藏/取消隐藏。只是没想到为上面的那个小块添加样式，我很傻。看起来是保持标记尽可能干净的最佳方式。其他人反对这种方法的任何cmets？ :)

【解决方案3】：

我建议将您的 display:none 规则移到样式表的顶部，以便它是第一个或第一个解析的，但老实说，这实际上取决于您拥有多少 http 请求/媒体资源。

您可以尝试将 js 放在 end body 标记之前，并确保 css 位于顶部，并且隐藏这些元素的 css 样式表是第一个链接的。

【讨论】：

【解决方案4】：

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

display:none 是最好的解决方案，但您可以使用直接随页面加载的 inline-css（如您的描述），如果您想格外小心，但这是不好的做法。

【讨论】：