easyui页面一打开的时候出现短暂混乱的问题
作者:互联网
原文链接:https://my.oschina.net/u/2331760/blog/3100155
问题描述
今天遇到一个问题,使用jQuery 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文件即可
<script type="text/javascript" src="${ctx }/js/beforeDatagrid.js"></script>
标签:function,easyui,短暂,pageloding,js,pc,PageLoadingTip,页面 来源: https://blog.csdn.net/ygl19920119/article/details/100886349