3

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

我的问题是，对于 css，仍然存在一些延迟，所以我最终将样式与下面的标记包括在内，我有点讨厌这样做，让我觉得我做错了什么。

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

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

提前致谢

4

4 回答 4

4

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

<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 用户就无法让它再次可见。

希望这可以帮助！

于 2009-10-06T06:17:32.360 回答
3

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

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

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

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

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

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

于 2009-10-06T06:13:34.660 回答
2

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

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

于 2009-10-06T06:01:25.420 回答
0

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

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

于 2009-10-06T06:06:22.007 回答