我有一個共同的問題,我有一個用HTML,CSS和JQuery完成的網頁。當頁面開始加載時,它首先加載html,並顯示div應該被css和jquery隱藏的第二個div。但過了一秒鐘,它看起來很完美。但是,第一秒看起來很糟糕。我怎樣才能避免這種情況?css加載晚,所以html看起來很奇怪一秒
回答
我還沒有這樣的經驗,但我認爲你的腳本的加載過程應該在這裏幫助。根據頁面的意圖做什麼(我不知道),我更喜歡你嘗試加載這種方式。
顯示使用DIV + CSS
<div style="display: none;">Hidden by default</div>
你的身體標記閉幕前裝入JQuery的文件。
當頁面完全加載時,它可以正常運行。
髒的解決辦法是內聯的CSS:
<div style="display: none;">This will be hidden</div>
一個更好的解決方案是建立在使用JavaScript需要這些元素。
好吧,我的項目很大,所以我不能那樣做。 – 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來顯示這些元素。
如果你希望你的css渲染速度更快,最好將隱藏的css語句移動到他們自己的小文件中,或者更好的是在頁面上的<style>
標籤中添加隱藏的CSS。這意味着它們幾乎立即被渲染。
關於jQuery —作爲斯科特提及—最快,你可以希望在dom ready
射擊。如果您正在等待窗口加載,則會更慢。使用純JavaScript,您可以將腳本標籤放置在需要隱藏在頁面中的元素之後。然後,您可以直接使用doument.getElementById
來定位它們,並將它們的display
設置爲none
,而無需等待頁面準備就緒。
- 1. 首先加載ASP.NET頁面看起來很奇怪,直到一切都加載
- 2. FOSUserBundle窗體看起來很奇怪
- 3. FFT數據看起來很奇怪
- 4. htaccess改變了,看起來很奇怪
- 5. Blend 2013看起來很奇怪
- 6. Matplotlib燭臺圖看起來很奇怪
- 7. CSS字體在歌劇中看起來很奇怪
- 8. 按鈕在我的html中看起來很奇怪
- 9. 加粗的字體在Mac上看起來很奇怪
- 10. 光源另一側的網格看起來很奇怪
- 11. DirectX中的第一人稱相機看起來很奇怪
- 12. 來自Cucumber Java TestNG的片段看起來很奇怪
- 13. 爲什麼我的fillpolygon形狀看起來很奇怪(Java GUI)?
- 14. Android按鈕在應用主題後看起來很奇怪
- 15. 使用popen,但文本看起來很奇怪 - Python
- 16. R --networknet - 傳統backprop看起來很奇怪
- 17. 谷歌地圖的縮放看起來很奇怪
- 18. 爲什麼XML中的CDATA語法看起來很奇怪?
- 19. 爲什麼列表在android listview中看起來很奇怪?
- 20. Sklearn LogisticRegression predict_proba結果看起來很奇怪
- 21. 試圖使用geoJSON,但座標看起來很奇怪嗎?
- 22. 的TableView看起來很奇怪的模擬器和iPhone上
- 23. 爲什麼這個主機名看起來很奇怪?
- 24. 下拉菜單看起來很奇怪嗎? (with javascript)
- 25. CSS3 Animate.css在Firefox上看起來很奇怪
- 26. Lambert材質的燈光效果看起來很奇怪
- 27. 什麼選擇讓IE 11站點看起來很奇怪?
- 28. 自定義android對話框看起來很奇怪
- 29. 在Firefox中輸入的圓角看起來很奇怪
- 30. UISwitch在IOS5模擬器和設備上看起來很奇怪
您的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