防止jQueryUI的標籤從顯示未修改的HTML

Question

目前正使用jQueryUI的選項卡的頁面有時會顯示原來的標記，被修改爲製表前：

當我看到這一點，它顯示了對估計0.2 - 1.0秒。

如何防止顯示原始標記？

Answer 1

這東西被稱爲FOUC（Flash的未風格的內容）。解決這個問題的方法是使用css隱藏包含該選項卡的div，並使用javascript顯示它。加載整個頁面後。

$(window).load(function() { 
    $('#your-tabbed-bar-div').show(); 
}); 

更多信息可以在這裏找到： http://www.bluerobot.com/web/css/fouc.asp/ http://paulirish.com/2009/avoiding-the-fouc-v3/

Answer 2

這聽起來像是有一些JavaScript在jquery ui之前執行的東西，所以它可以像重新安排js標籤的順序一樣簡單嗎？

如果這不起作用，我會建議一個黑客 - 確保樣式被加載到頁面上，如果文件下載速度不夠快，這是可疑的，因爲瀏覽器很可能會緩存文件和這可能不是很大的開始 - 無論如何，您可以複製樣式並確保它們快速加載，然後在html中專門設置列表元素的類屬性。

如果你不喜歡這種黑客，那麼這個怎麼樣 - 設置列表樣式顯示：none，然後運行setTimeout來檢查你想要查看的樣式屬性 - 當它在那裏時，設置顯示的阻止（或其他），當然停止檢查屬性後，你看到它。

Answer 3

這包括在jQuery UI documentation。