$(文件).ready之前的事件

Question

我有一个功能,可以在加载文档之前有条件地隐藏控件.如果我启用此功能$(document).ready,我会看到页面闪烁以有条件地隐藏控件.我想知道是否有一个事件可以在$(document).ready被触发之前被调用.

Answer 1

常见问题.使用CSS默认隐藏控件,然后使用JS $(document).ready来决定哪些控件可见.没有闪烁.看起来页面的相应部分正在逐步加载.

在文档准备好之前,您无法安全地运行JS,并且在运行JS之前,部分文档将可见.因此,唯一的解决方案是确保默认情况下隐藏所有非闪烁元素,然后只显示您想要显示的元素.

最简单的方法是在所有动态元素上放置一个公共类:

<div id="myControl1" class="initiallyHidden"></div>

并使用CSS确保它们全部隐藏起来:

.initiallyHidden {display: none;}

然后你的javascript将在它决定一个元素应该可见时覆盖它:

document.getElementById("myControl1").style.display = "block";

Answer 2

正如其他人提到的那样做

<div id="test" class="hidden"> my hidden div tag </div>

.hidden
{
 display:none;   
}

在document.ready中,您可以显示,这相当于onload,它等待加载html

$(document).ready(function() {
  $('#test').show();
});

jsfiddle这里的例子