使用JQuery隐藏div

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 */

});

该<div>用户是否启用JavaScript将被立即隐藏(无闪烁),如果他们不这样做(这可能规避不会是优雅降级问题MEDER指出,在他的选项C).

这是有效的,因为什么时候可以<html>在页面开始加载时立即访问该元素.

为什么究其原因document.getElementById("div_id").style.display='none';是可能的工作是因为你拥有它的<body>元素之后,因此脚本不会等待整个DOM执行前被加载.