$（文件）.ready之前的事件

Question

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

Answer 1

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

在文档准备好之前，您无法安全地运行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这里的例子

http://jsfiddle.net/kdpAr/

Answer 3

当我在加载Javascript之前需要隐藏某些内容时，我会将其隐藏在css中，如下所示：

 display:none;

要么：

 visibility: hidden;

如果需要，您还可以将条件与Javascript结合使用以显示它。

Answer 4

在HTML元素旁边调用JavaScript函数

例如：

<span></span>
<script> call JS function</script>

Answer 5

您可以在要隐藏condionnaly的HTML之后立即打开一个脚本标记（但是必须在之前声明jQuery），然后直接调用hide，而不是在$（document）中。就像这样：

<div id="toHide">Lorem ipsum</div>

<script type="text/javascript">
  $("#toHide").hide();
</script>

Answer 6

你必须在运行你的javascript之前放置你的元素

<div>hi</div>
<script>
$("div").css('background-color', '#EEE');
</script>