easyui頁面一打開的時候出現短暫混亂的問題，解決辦法

不少同窗在佈局用到easyui的時候總會出現一個問題。就是在一進入主界面的時候，頁面的並非立刻就展示，而是會有一個混亂的過程，以後一閃就又好了。其實這個就是由於easyui是在dom載入完畢以後纔會對整個頁面進行解析，

解決辦法：要解決這個問題其實只要好好利用這個onComplete 事件在結合一個載入遮罩就解決問題了。

 

首先你在body下面第一行加入一個載入提示遮罩div

<div 
id='Loading' 
style="position:absolute;z-index:1000;top:0px;left:0px;width:100%;height:100%;
       background:#DDDDDB url('style/images/bodybg.jpg');
       text-align:center;padding-top: 20%;">
   <h1>
        <image src='style/images/loading.gif'/>
        <font color="#15428B">
             加載中···
        </font>
   </h1>
</div>

再在head裏面就加入一段js：

<script>
function closes(){
	$("#Loading").fadeOut("normal",function(){
		$(this).remove();
	});
}
var pc;
$.parser.onComplete = function(){
	if(pc) clearTimeout(pc);
	pc = setTimeout(closes, 1000);
}
</script>

 

或者能夠這樣:

單獨寫一個js文件:

beforeDatagrid.js

var shadeDiv = "<div id='PageLoadingTip' style='position: absolute; z-index: 1000; top: 0px; left: 0px; width: 100%; height: 100%; background: #C0C0C0; text-align: center;'>	<h2 style='top: 40%; position: relative; color: white;'>頁面加載中···</h2>	</div>"

document.write(shadeDiv);

function _PageLoadingTip_Closes() {
	$("#PageLoadingTip").fadeOut("normal", function() {
		$(this).remove();
	});
}

var _pageloding_pc;

$.parser.onComplete = function() {
	if (_pageloding_pc)
		clearTimeout(_pageloding_pc);
	_pageloding_pc = setTimeout(_PageLoadingTip_Closes, 200);
}

 

而後在jsp的head標籤裏面引入beforeDatagrid.js文件便可