Question

我想在浏览器中加载页面后立即使用Javascript隐藏div。如果我使用以下代码，我能够做到这一点：

document.getElementById("div_id").style.display='none';

但是，当我尝试使用JQuery做同样的事情时，我注意到div在页面加载后可见几秒钟，然后它变得隐藏。我使用的JQuery代码是

$(document).ready(function() {

$("#div_id").css('display','none');

});

同样的事情发生了，如果我使用$("#div_id").hide();这是因为即时通讯使用库，这会使进程慢一点，而不是直接使用document.getElementById？。有什么方法可以解决这个问题吗？

谢谢。

Answer 1

这是一个简单的解决方案。按如下方式设置CSS类

.js #div_id { display: none; }

然后有以下jQuery

$('html').addClass('js');

$(document).ready(function() {

    /* normal code to run when DOM has loaded here */

});

如果用户启用了JavaScript，<div>将立即隐藏（无闪烁），如果用户没有启用，则会隐藏<html>（因为graceful degradation可能导致问题meder points out选项c）。

这是有效的，因为何时可以在页面开始加载时立即访问document.getElementById("div_id").style.display='none';元素。

<body> 可能工作的原因是因为您在元素之后的{{1}}中有它，因此脚本不会等待在执行之前加载整个DOM。

Answer 2

你可以

a）在元素之后直接插入以使用jQuery隐藏它：
b）通过直接使用DOM方法（例如您的第一个代码段
c）用CSS隐藏它的缺点是对于CSS启用非JS用户他们将无法看到任何内容

我会选择A和C，但我不确定你藏的是什么。

A：

<div id="foo"></div>
<script>$('#foo').hide()</script>

C：

div#foo { display:none; }

Answer 3

首先，使用$("#div_id").hide();。它更适合jQuery。

其次，这是因为你正在使用$(document).ready。通常，在DOM可供使用之前，该事件不会触发。但是，由于实现了bindReady()的方式，在某些浏览器上，此事件可能等同于onload事件，在所有内容加载后才会触发。不幸的是，我知道解决这个问题的唯一方法（对于因屏幕阅读器而无法使用JavaScript的残疾用户不会造成问题）是设置短暂超时（比如说50毫秒）并反复检查页面加载时存在$("#div_id")。这是一个可怕的黑客，我不推荐它，但它应该工作。也就是说，你知道大多数用户都不会看到内容，你几乎可以接受内容的闪存。

Answer 4

我认为原因是DOM逐步加载并且$（document）.ready事件正在等待DOM在执行之前完全加载。

如果您真的希望在页面加载时元素不可见，您可以在CSS中定义该样式吗？

我没试过这个，但是如果你仍然希望div对于非Javascript用户可见，那么我认为你可以这样做：

<noscript>
  <style type="text/css">
  #elementid {display: block !important;}
  </style>
</noscript>

Answer 5

我认为更好的选择是设置div的样式，以便在编写页面时隐藏它，而不使用任何javascript。

然后，只要您准备好再次显示它，请使用javascript取消隐藏它：

$('#someId').show();

Answer 6

这可能是因为您包含脚本的方式。浏览器必须在运行之前下载它们。因此，如果你有很多js文件，这可能会导致这个问题。

Answer 7

更有可能是因为您正在等待文档准备好隐藏它。如果您希望它默认隐藏，这似乎更像是服务器端脚本的作业。

使用JQuery隐藏div

7 个答案: