在使用jquery UI創建標籤時加載頁面時出現延遲

Question

在我的頁面中，我有一些標籤...但按照要求，標籤顯示在靠近中間的某處...因此，標籤加載速度很快，需要一些時間來加載包含標籤的部分...

當主頁面被加載時，標籤內的所有頁面也被加載......所以它需要一些時間......我怎樣才能避免這種情況？

我的代碼：？

<div class="ui-tabs" id="tabs" style="width: 97%;display:none;"> 
        <ul class="ui-tabs-nav"> 
         <li id="planDetails-tab"><a id="hrefPlanDetailsid" accesskey="p" href="#divPlanDetailsTab" class="planTabHeader">&nbsp;Plan Details</a></li> 
         <li id="testPlan-tab"><a id="hrefTestPlanid" accesskey="t" href="#divTestPlanTab" class="planTabHeader">&nbsp;&nbsp;Test Plan&nbsp;&nbsp;&nbsp;</a></li>       
         <li id="serviceArea-tab"><a href="#divServiceAreaTab" accesskey="s" class="planTabHeader">Service Area</a></li> 
         <li id="rates-tab"><a href="#divRatesTab" accesskey="r" class="planTabHeader">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Rates&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li> 
         <li id="benefits-tab"><a href="#divBenefitsTab" accesskey="b" class="planTabHeader">&nbsp;&nbsp;&nbsp;&nbsp;Benefits&nbsp;&nbsp;&nbsp;</a></li> 
         <li id="network-tab"><a href="#divNetworkEcpTab" accesskey="n" class="planTabHeader">Network ECP</a></li> 
         <li id="historical-tab"><a href="#divHistoricalTab" accesskey="h" class="planTabHeader">&nbsp;&nbsp;Historical&nbsp;&nbsp;&nbsp;</a></li> 
         <li id="directory-tab"><a href="#divDirectoryTab" accesskey="d" class="planTabHeader">&nbsp;&nbsp;&nbsp;Directory&nbsp;&nbsp;</a></li> 
        </ul> 

        <div id="divPlanDetailsTab" style="width: 100%;"> 
         <fieldset> 
          <s:include value="PlanDetail.jsp" /> 
         </fieldset> 
        </div> 
        <div id="divTestPlanTab" style="width: 100%;"> 
         <fieldset> 
          <s:include value="TestPlan.jsp" /> 
         </fieldset> 
        </div>     
        <div id="divServiceAreaTab" 
         class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active" style="width: 100%;"> 
         <fieldset> 
         <s:include value="PlanServiceArea.jsp" /> 
         </fieldset> 
        </div>     

        <div id="divRatesTab" 
        class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active" style="width: 100%;"> 
         <fieldset> 
         <s:include value="Rates.jsp" /> 
         </fieldset> 
        </div> 

        <div id="divBenefitsTab" class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active" style="width: 100%;"> 
         <fieldset> 
         <s:include value="PlanBenefits.jsp" /> 
         </fieldset> 
        </div> 

        <div id="divNetworkEcpTab" 
        class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active" style="width: 100%;"> 
         <fieldset> 
         <s:include value="NetworkECP.jsp" /> 
         </fieldset> 
        </div> 

        <div id="divHistoricalTab" class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active" style="width: 100%;"> 
        <fieldset> 
         <s:include value="PlanHistorical.jsp" /> 
         </fieldset> 
        </div> 
        <div id="divDirectoryTab" 
        class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active" style="width: 100%;"> 
         <fieldset> 
          <s:include value="ProviderDirectory.jsp" /> 
         </fieldset> 
        </div> 
      </div> 

js文件：

$(function() { 
      $tabs = $("#tabs").tabs(); 
      $tabs.css('display','block'); 

      //Initially hide Test Plan tab 
      $('ul li#testPlan-tab').hide(); 
      $('#hrefTestPlanid').hide(); 
      $tabs.tabs({ 
       active : function(event, ui) { 
       } 
      }); 
     }); 

Answer 1

使用AJAX方法只需使用內容加載：http://jqueryui.com/tabs/#ajax

這樣一來，你是不是加載大量的文本或元素的，這將可能永遠不會被顯示

創建一個目錄「Ajax」的，在特定文件中移動選項卡的代碼並定義如下所示的選項卡：

<ul class="ui-tabs-nav"> 
    <li id="planDetails-tab"><a href="ajax/divPlanDetailsTab.php" id="hrefPlanDetailsid" accesskey="p" class="planTabHeader">&nbsp;Plan Details</a> 
    </li> 
    <li id="testPlan-tab"><a href="ajax/divTestPlanTab.php" id="hrefTestPlanid" accesskey="t" class="planTabHeader">&nbsp;&nbsp;Test Plan&nbsp;&nbsp;&nbsp;</a> 
    </li> 
    ... 
</ul> 

    <script> 
    $(function() { 
    $("#tabs").tabs({ 
     beforeLoad: function(event, ui) { 

      ui.panel.html("Loading in progress..."); 

      ui.jqXHR.error(function() { 
      ui.panel.html(
      "Couldn't load this tab. We'll try to fix this as soon as possible. " + 
      "If this wouldn't be a demo."); 
     }); 
     } 
    }); 
    }); 
    </script>