easyui的tabs在完全渲染之后才显示出来

如果tabs的初始化都写在好html中,在网速很慢的情况下,每个tab页在tabs渲染好之前就会显示出来,而且看起来就是普通的div,体验很差,解决方式如下两种:

原来的tabs的写法:

<div class="easyui-layout" data-options="fit:true" id="costLayOut">
   <div id="tabsdeahan" class="easyui-tabs">
       <div data-options="title: '工程参数',,iconCls:'',iniframe: true,href: ''" name="gccs">工程参数</div>
       <div data-options="title: '费率参数', iconCls:'', iniframe: true,href: ''" name="flcs">费率参数</div>
   </div>
</div> 

(一).先隐藏layout,然后在页面加载完再显示出来

<div class="easyui-layout" data-options="fit:true" id="costLayOut" style="display:none">
   <div id="tabsdeahan" class="easyui-tabs">
       <div data-options="title: '工程参数',,iconCls:'',iniframe: true,href: ''" name="gccs">工程参数</div>
       <div data-options="title: '费率参数', iconCls:'', iniframe: true,href: ''" name="flcs">费率参数</div>
   </div>
</div> 

JS:

$(function({
   $('#costLayOut').show();//页面加载完再显示出来
}));

(二)在html中不写任何tab,所有tab页的增加都写在JS中,动态去加上

<div class="easyui-layout" data-options="fit:true" id="costLayOut" style="display:none">
   <div id="tabsdeahan" class="easyui-tabs">  
   </div>
</div> 

JS:动态增加每个tab:

$(function({
  addTab('工程参数','','',"#tabsdeahan",'gccs',true);
  addTab('费率参数','','i',"#tabsdeahan",'flcs',true);
}))

function addTab(title, href,icon,tabsId,name,isIframe){    
    var tt = $(tabsId);    
    if (tt.tabs('exists', title)){//如果tab已经存在,则选中并刷新该tab            
        tt.tabs('select', title);    
        refreshTab({tabTitle:title,url:href});    
    } else {    
         var content="";  
        if (typeof(href) != 'undefined'){    
            content = '<iframe scrolling="no" frameborder="0"  src="'+href+'" style="width:100%;height:100%;"></iframe>';    
        } else {    
            content = '';    
        }    
        var addDom = tt.tabs('add',{    
            title:title,
            closable:false,    
            content:content, 
            iniframe: isIframe?isIframe:false,//是否内嵌iframe
            iconCls:icon||'icon-default'    
        }); 
        //被每个tab增加name属性,这个是因为需要利用名字做其他的一些处理,可以不加   
        if(name){
        	var tab = addDom.tabs('getTab',title);
        	if(tab){
        		tab.attr("name",name);
        	}
        }
    }    
}    

function refreshTab(cfg){    
    var refresh_tab = cfg.tabTitle?$(tabsId).tabs('getTab',cfg.tabTitle):$(tabsId).tabs('getSelected');    
    if(refresh_tab && refresh_tab.find('iframe').length > 0){    
	    var _refresh_ifram = refresh_tab.find('iframe')[0];    
	    var refresh_url = cfg.url?cfg.url:_refresh_ifram.src;    
	    _refresh_ifram.contentWindow.location.href=refresh_url;    
    }    
}