$（文件）.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>