Javascript 使用jquery ui创建选项卡时加载页面延迟
在我的页面中,我有一些选项卡…但根据要求,选项卡显示在靠近中间的某个位置…因此,选项卡上方的部分会快速加载,加载包含选项卡的部分需要一些时间 当主页被加载时,选项卡中的所有页面也被加载…因此这需要一些时间…我如何避免这种情况 我的代码:Javascript 使用jquery ui创建选项卡时加载页面延迟,javascript,ajax,jquery-ui,tabs,jquery-tabs,Javascript,Ajax,Jquery Ui,Tabs,Jquery Tabs,在我的页面中,我有一些选项卡…但根据要求,选项卡显示在靠近中间的某个位置…因此,选项卡上方的部分会快速加载,加载包含选项卡的部分需要一些时间 当主页被加载时,选项卡中的所有页面也被加载…因此这需要一些时间…我如何避免这种情况 我的代码: <div class="ui-tabs" id="tabs" style="width: 97%;display:none;"> <ul class="ui-tabs-nav">
<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"> Plan Details</a></li>
<li id="testPlan-tab"><a id="hrefTestPlanid" accesskey="t" href="#divTestPlanTab" class="planTabHeader"> Test Plan </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"> Rates </a></li>
<li id="benefits-tab"><a href="#divBenefitsTab" accesskey="b" class="planTabHeader"> Benefits </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"> Historical </a></li>
<li id="directory-tab"><a href="#divDirectoryTab" accesskey="d" class="planTabHeader"> Directory </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>
只需使用AJAX方法加载内容: 这样,您就不会加载大量可能永远不会显示的文本或元素 创建一个目录“ajax”,在特定文件中移动选项卡的代码,并定义如下选项卡:
<ul class="ui-tabs-nav">
<li id="planDetails-tab"><a href="ajax/divPlanDetailsTab.php" id="hrefPlanDetailsid" accesskey="p" class="planTabHeader"> Plan Details</a>
</li>
<li id="testPlan-tab"><a href="ajax/divTestPlanTab.php" id="hrefTestPlanid" accesskey="t" class="planTabHeader"> Test Plan </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>
-
-
...
$(函数(){
$(“#制表符”)。制表符({
加载前:函数(事件、ui){
html(“正在加载…”);
ui.jqXHR.error(函数(){
ui.panel.html(
“无法加载此选项卡。我们将尝试尽快修复此问题。”+
“如果这不是演示的话。”);
});
}
});
});
我在示例中添加了加载文本。
<ul class="ui-tabs-nav">
<li id="planDetails-tab"><a href="ajax/divPlanDetailsTab.php" id="hrefPlanDetailsid" accesskey="p" class="planTabHeader"> Plan Details</a>
</li>
<li id="testPlan-tab"><a href="ajax/divTestPlanTab.php" id="hrefTestPlanid" accesskey="t" class="planTabHeader"> Test Plan </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>