如何在使用jQuery加载页面之前隐藏HTML元素

Question

我有一些显示或隐藏div的JQuery代码.

$("div#extraControls").show();   // OR .hide()

我最初想要div不可见所以我用过:

$(document).ready(function() {
    $("div#extraControls").hide();
});

但是,在浏览器上,内容在消失之前加载一秒钟,这不是我想要的.

如何在页面加载之前设置隐藏元素,同时保持显示的能力使用脚本动态隐藏它？

Answer 1

div.hidden
{
   display: none
}

<div id="extraControls" class="hidden">
</div>

$(document).ready(function() {
    $("div#extraControls").removeClass("hidden");
});

Answer 2

创建一个 css 类

.hidden {
display: none;
}

将此添加到您不希望在加载页面时可见的任何元素。然后使用$("div#extraControls").show();再次显示它。