2014-01-14 63 views
0

我有一個基於jQuery的網站的問題。我的網站使用jsTree在我的網站上顯示TreeView。我這樣加載jsTree:jstree文檔準備遲到

$(function() { 
    $('#jstree').jstree({ 
     "plugins": 
     [ 
      "json_data", "ui", "hotkeys", "sort", "search", "state", "wholerow" 
     ] 
    }); 
}); 

現在的問題是,我的網站呈現一點點延遲。用戶可以一秒鐘看到所有沒有jsTree風格和功能的html元素。

加載網站: First loaded Picture

後第二:

Second picture

也許有些人有任何想法,那將是很好! 謝謝!

+1

什麼你所描述的是在這裏通常被稱爲FOUC(閃存的未風格的內容),並有圍繞這個話題在這方面的幾個問題 - 檢查http://stackoverflow.com/questions/11640238/how-to-stop-flash-of-unstyled-內容 – fvu

回答

2

你已經偶然發現了FOUC。 A flash of unstyled content (FOUC) is an instance where a web page appears briefly with the browser's default styles prior to loading an external CSS stylesheet, due to the web browser engine rendering the page before all information is retrieved. The page corrects itself as soon as the style rules are loaded and applied; however, the shift is quite visible and distracting.

有很多方法可以修復,最流行的可能是隱藏顯示您的內容的div或元素,直到它準備好。

我猜#jstree是一個div,如果是的話你可以這樣做:

<div id="jstree" style="display:none;"> 

那麼當DOM就緒,你會取消隱藏它:

$(document).ready(function() { 
    $('#jstree').show(); 
});