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例子

Answer 3

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

 display:none;

或：

 visibility: hidden;

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

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>