【easyui】解决easyui闪屏问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Hemk340200600/article/details/78145565

在最近的项目中，后台读取的数据，在前台渲染时需要一定的时间，这段时间内页面的格式混乱，但是过一会儿就会恢复。从用户的角度来看就是闪屏现象，点击之后总是要闪一下才能正常显示。为了增强用户体验，我们可以通过给所有页面增加一个遮罩层，弄出一个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>

最终效果图如下：