在顯示標籤之前防止整頁閃爍

當前我在頁面上使用twitter bootstrap tabs並使用以下代碼。我添加了一些javascript/jquery在URL中推送哈希標籤，所以我實際上可以鏈接到一個標籤。這工作正常，但是當我加載第一個標籤頁時，我看到了整個頁面，然後我很快就看到了第一個標籤頁。現在，如果我點擊頁面上的標籤，一切都很好，而且我不會再顯示整個頁面。這種閃光的數據至少是令人討厭的。關於我做錯什麼的想法？在顯示標籤之前防止整頁閃爍

Jade Template Code，編譯成標準的HTML

div(class="tabbable") 
     ul(id="myTab", class="nav nav-tabs") 
     li 
      a(href="#surveyEditData", data-toggle="tab") Survey 
     li 
      a(href="#surveyEditQuestions", data-toggle="tab") Questions 
     ...etc...

JavaScript代碼：

$(function(){ 
     // Function to activate the tab 
     function activateTab() { 
     var activeTab = $('[href=' + window.location.hash.replace('/', '') + ']'); 
     activeTab && activeTab.tab('show'); 
     } 

     // Trigger when the page loads 
     activateTab(); 
    });

來源

2012-12-17 Scott

jQuery的加載（）函數可以做的伎倆.. – bipen

我看了看文檔，並嘗試了一些東西，你可以舉一個例子或更多的方向？謝謝 – Scott

你看到在HTML延遲JavaScript的執行完畢之前被渲染。

爲了解決這個問題，您需要將初始CSS樣式（例如淡入淡出或隱藏）放到除第一個之外的所有其他選項卡上。

CSS規則在渲染過程中立即執行，因此這些規則不會有任何延遲。

來源

2013-03-22 23:45:16

謝謝，我還沒有嘗試編輯代碼，但這是有道理的，應該解決我的問題。非常感謝！ – Scott

在顯示標籤之前防止整頁閃爍

回答

相關問題