隱藏的div - 通過樣式顯示減少延遲無+ javascript

我通常在我的頁面上使用隱藏的div，直到他們需要用javascript隱藏。我以前也用javascript做了初始隱藏，但現在轉移到使用css隱藏它們以確保隱藏發生（js在瀏覽器中禁用）。 js隱藏也存在延遲問題（等待js加載）。隱藏的div - 通過樣式顯示減少延遲無+ javascript

我的問題是，與CSS，仍然有一些延遲，所以我最終包括像下面的標記樣式，我有點討厭這樣做，讓我覺得我做錯了什麼..

<div style="display:none;"> 
    content 
</div>

你們多久這樣做？有沒有辦法讓我的CSS或JS以某種方式加載之前的其餘標記？

在此先感謝

來源

2009-10-06 Chris

您是否將鏈接指向'head'元素中的外部CSS文件？ – 2009-10-06 06:01:16

你使用jQuery嗎？ – halocursed 2009-10-06 06:01:46

包括爲內嵌樣式塊的CSS頁面的頂部：

<style> 
    .hidden: { display: none; } 
</style>

然後用所需的類註釋您的DIV：

<div class="hidden"> ... </div>

這種做法的結果是，到顯示元素，您不需要將顯示設置爲block，您可以使用JavaScript添加/刪除元素中的類。這樣做會更好，因爲不是每個元素都需要display = block（表格和內聯元素具有不同的顯示模式）。

儘管另一張海報說，這不是一個壞習慣。您應該將CSS分爲表象和功能標記 - 功能一個控制這樣的邏輯事情是否或不是被顯示，表象一個剛剛決定如何表現出來。將函數式CSS內聯以避免頁面跳躍是沒有問題的。

來源

2009-10-06 06:13:34 levik

我更傾向於這個答案。我確實使用了class =「hidden」的想法，並通過添加/刪除js類來做後來的隱藏/取消隱藏。只是沒有想到爲那個小塊添加風格，傻了我。看起來像保持標記儘可能乾淨的最佳方式。來自其他人對此方法的評論？ :) – Chris 2009-10-06 06:36:27

我會建議將您的顯示：無規則樣式表的頂部，這樣它的第一個或第幾解析的，雖然說實話這真的取決於有多少HTTP請求/您擁有的媒體資源。

您可以嘗試在結束標籤前拋出js，並確保css位於頂部，隱藏這些元素的css樣式表是鏈接的第一個。

來源

2009-10-06 06:01:25

取決於瀏覽器。 Opera，WebKit和Konqueror並行加載CSS和JavaScript（然而，在應用之前，所有的CSS都被加載）。

display:none是最好的解決方案，但是你可以使用直接加載頁面的inline-css（就像在你的描述中一樣），如果你想要格外謹慎，不過它的壞習慣。

來源

2009-10-06 06:06:22 3zzy

我可能會敲定這一點，但在很多應用程序，當我想避免這種延遲我使用內聯腳本標記內容後，像這樣：

<div id="hidden-div"> 
    content 
</div> 
<script type="text/javascript"> 
    $('#hidden-div').hide(); 
</script>

或者如果你不使用jQuery：

<div id="hidden-div"> 
    content 
</div> 
<script type="text/javascript"> 
    document.getElementById('hidden-div').style.display = 'none'; 
</script>

起初，這看起來笨重;但是，也有幾個原因，我採取這種做法：

的隱藏是立即（不等待整個DOM加載）禁用JavaScript意志
人們仍然看到的內容，而如果我們用CSS隱藏它，則非JS用戶無法再次使其可見。

希望這會有所幫助！

來源

2009-10-06 06:17:32

隱藏的div - 通過樣式顯示減少延遲無+ javascript

回答

相關問題