css加載晚，所以html看起來很奇怪一秒

我有一個共同的問題，我有一個用HTML，CSS和JQuery完成的網頁。當頁面開始加載時，它首先加載html，並顯示div應該被css和jquery隱藏的第二個div。但過了一秒鐘，它看起來很完美。但是，第一秒看起來很糟糕。我怎樣才能避免這種情況？css加載晚，所以html看起來很奇怪一秒

來源

2013-03-16 Arif YILMAZ

您的CSS文件是否鏈接到文檔的HEAD中？ – 2013-03-16 11:21:43

是的，它在頭部鏈接 – 2013-03-16 11:21:59

你是通過jQuery來設置類，然後隱藏類，或者你是否使用jquery來隱藏？將CSS設置爲'display：none;'然後使用jquery顯示通常會更快。它不一定是內聯CSS，但在CSS而不是jQuery中速度更快。 – Scott 2013-03-16 11:31:23

我還沒有這樣的經驗，但我認爲你的腳本的加載過程應該在這裏幫助。根據頁面的意圖做什麼（我不知道），我更喜歡你嘗試加載這種方式。

顯示使用DIV + CSS

<div style="display: none;">Hidden by default</div>

你的身體標記閉幕前裝入JQuery的文件。

當頁面完全加載時，它可以正常運行。

來源

2013-03-16 11:35:59 OmniPotens

髒的解決辦法是內聯的CSS：

<div style="display: none;">This will be hidden</div>

一個更好的解決方案是建立在使用JavaScript需要這些元素。

來源

2013-03-16 11:24:02 erenon

好吧，我的項目很大，所以我不能那樣做。 – 2013-03-16 11:25:15

哪一個你不能做？ – erenon 2013-03-16 11:26:12

我不能使用內聯的CSS – 2013-03-16 11:28:18

$(this).hide();或$(this).addClass('.hidden');總是慢於.class { display:none; }

jQuery有等待DOM加載。 CSS不。設置你的CSS來隱藏你需要隱藏的元素，然後使用jQuery來顯示這些元素。

來源

2013-03-16 11:34:59 Scott

如果你希望你的css渲染速度更快，最好將隱藏的css語句移動到他們自己的小文件中，或者更好的是在頁面上的<style>標籤中添加隱藏的CSS。這意味着它們幾乎立即被渲染。

關於jQuery —作爲斯科特提及—最快，你可以希望在dom ready射擊。如果您正在等待窗口加載，則會更慢。使用純JavaScript，您可以將腳本標籤放置在需要隱藏在頁面中的元素之後。然後，您可以直接使用doument.getElementById來定位它們，並將它們的display設置爲none，而無需等待頁面準備就緒。

來源

2013-03-16 11:42:22 Pebbl

css加載晚，所以html看起來很奇怪一秒

回答

相關問題