如何隐藏 DIV，它们在页面加载时显示一瞬间答案

【问题标题】：How to Hide DIVs, they are Showing for a Split Second on page Load如何隐藏 DIV，它们在页面加载时显示一瞬间
【发布时间】：2009-12-06 17:41:06
【问题描述】：

我制作了一个非常快速的 jQuery 幻灯片，我用它来隐藏在轮到他们之前不应该显示的 DIV：

$(document).ready(function() {
  //Hide All Div's Apart From First
  $('div#gall2').hide();
  $('div#gall3').hide();
  $('div#gall4').hide();

但是在加载页面时，您可以看到 DIV 的 gall2 gall3 和 gall4 在它们被隐藏之前的一瞬间。

在我的 CSS 中添加是否可以：

#gall2, #gall3, #gall4{ display:none;}

这将解决他们显示瞬间的问题，只是想知道它是否可以接受

【问题讨论】：

标签： jquery element

【解决方案1】：

在 CSS 中禁用是可以的，但是没有 JS 的用户将永远看不到它们。

要对仅使用 JS 的用户禁用，请标记正文和适当的 CSS：

<body>
  <script type="text/javascript">
    document.body.className += " js";
  </script>

CSS：

.js #gall2, .js #gall3, .js #gall4 { display: none; }

【讨论】：

@orip。我做了类似的事情，但在头脑中进行，并使用document.documentElement.className += " js" 将其应用于html 元素。我把它放在我所有其他脚本之前的脚本块中。
@Gregory - 这不是我的主意，我见过其他人使用这种技术。我也觉得这很聪明:)
@dcneiner - 这很酷，我没想到。就像你提到的那样，如果你愿意，你可以把它放在<head>。
这非常聪明（@dcneiner 也是）——我已经习惯了等待 jQuery 的 document.ready。这会很好地降解。

【解决方案2】：

作为 orip 答案的替代方法，如果您不喜欢在 <body> 中添加脚本，可以执行以下操作：

<html>
<head>
  <script src="jquery.js"></script>
  <script>
    $('html').addClass('js');
    $(function() {
      // do DOM ready stuff
    });
  </script>
  <style>
  .js #gall2, .js #gall3, .js #gall4 { display: none; }
  </style>
</head>

您将避免以这种方式闪烁，因为您正在向 HTML 中添加一个类名之前 DOM 准备好。

【讨论】：

显然，除非您将 jQuery 脚本标签放在其他标签之前，否则此示例将不起作用。我建议只使用document.documentElement.className += ' js' 来避免游戏早期的 jQuery 依赖。
@dcneiner：这里只是举个例子。当然你需要在使用 jQuery 之前包含 jQuery 库。你的例子也有效。

【解决方案3】：

~~是的，在你的 CSS 中这样做当然是可以接受的~~

其他回答是正确的。仅使用 JS 使事物可见并不是一个好习惯。我想我只是从技术上考虑：以这种方式更改 CSS 可以解决问题。

【讨论】：

我意识到禁用 JS 的人越来越少，但是如果要使用 JS启用功能，那么内容也应该使用 hidden JS触发的东西。如果 JS 简单地添加一个类就可以了，但是在 CSS 中默认隐藏不是一个好主意。

【解决方案4】：

总是试着想象关闭 JS 的用户会看到什么。如果您使用 CSS 解决方案，非第一个 DIV 也不会显示给他们，但如果您以编程方式更改幻灯片，他们显然只会看到第一个。最好给他们一个“No JS”选项。然后，如果您可以确定用户启用了 JS，您可以使用 CSS 隐藏 div 并使用 JS 显示它们。

【讨论】：

【解决方案5】：

之所以显示它们，是因为默认情况下可能会设置显示 div。由于在页面上触发“就绪”事件可能需要几秒钟，因此在页面上的所有内容都加载并准备好之前，不会触发 .hide() 方法调用。

如果我没记错的话，.hide() 方法只会将元素的“display”属性设置为“none”。因此，默认情况下，通过 CSS 将 div 设置为隐藏允许它们始终隐藏，并且您可以获得额外的好处，即没有 JS 的用户也看不到它们。

【讨论】：