在最近的项目中,后台读取的数据,在前台渲染时需要一定的时间,这段时间内页面的格式混乱,但是过一会儿就会恢复。从用户的角度来看就是闪屏现象,点击之后总是要闪一下才能正常显示。为了增强用户体验,我们可以通过给所有页面增加一个遮罩层,弄出一个loading在转圈即可。前端代码如下:
<div id='loadingDiv'style="position: absolute; z-index: 1000; top: 0px; left: 0px;
width: 100%; height: 100%; background: white; text-align: center;">
<!--下面的img可以自行修改-->.
<img src="${ctx}/resources/easyui/themes/metro-blue/images/loading.gif"style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;width:25px;height:25px;"/>
</div>
<script type="text/JavaScript">
function closeLoading() {
$("#loadingDiv").fadeOut("normal", function () {
$(this).remove();
});
}
var no;
$.parser.onComplete = function () {
if (no) clearTimeout(no);
no = setTimeout(closeLoading,10);
}
</script>
最终效果图如下: