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

发布于 2024-08-13 09:43:34 字数 445 浏览 5 评论 0原文

我制作了一个非常快速的 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;}

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

原文

I have made a very quick jQuery slideshow, and I'm using this to hide the DIVs which shouldn't be shown until it's their turn:

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

But on loading the page you can see DIV's gall2 gall3 and gall4 for a split second before they are hidden.

Would it be OK to just add inside my CSS:

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

This would solve the problem of them showing for a split second, just want to know if it's acceptable

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

水晶透心 2024-08-20 09:43:34

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

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

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

CSS：

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

Disabling in CSS is fine, but then users without JS will never see them.

To disable for users with JS only, mark the body and appropriate CSS:

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

CSS:

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

回复收藏 0 原文

凌乱心跳 2024-08-20 09:43:34

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

<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 准备好之前。

As an alternatie to orip's answer, you can do the following if you don't like adding scripts in the <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>

You will avoid flickering this way because you are adding a class name to the HTML before DOM ready.

回复收藏 0 原文