EasyUI:避免组件渲染完成前的无样式状态

现象:EasyUI的组件在渲染完成前,有一段时间就把无样式的原始状态显示出来,然后过1秒左右渲染完成,变成比较好看的样子,这样的视觉体验很差。

解决办法:在页面加一个高index的遮罩层,在渲染完成后,关闭遮罩层,这样不会给用户突兀的感觉:

实现:

遮罩层代码:

<div id='Loading' style="position: absolute; z-index: 1000; top: 0px; left: 0px;
width: 100%; height: 100%; background: white; text-align: left;padding:5px 10px">
<font>加载中···</font>
</div>

 

控制脚本:

/*
* 关闭遮罩层
*/
function closemask() {
$("#Loading").fadeOut("normal", function () {
$(this).remove();
});
}

var pc;
$.parser.onComplete = function () {
if (pc){
clearTimeout(pc);
}
pc = setTimeout(closemask, 10);
}

posted on 2015-11-03 11:35  神秘之光  阅读(1025)  评论(0)    收藏  举报

导航