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);
}
浙公网安备 33010602011771号