2013-03-16 100 views
10

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

+0

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

+0

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

+0

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

回答

4

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

顯示使用DIV + CSS

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

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

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

2

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

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

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

+0

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

+0

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

+0

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

4

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

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

2

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

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

相關問題