【EasyUI】——页面加载闪屏问题

  引言

  这个问题，做项目的时候真的很伤脑筋，页面展示很难看，强迫症根本受不了啊！终于终于，小编找到解决的办

法了。

  页面加载原效果

  

 

  小编不知道有多少人看过这个页面，如果我是用户，反正我是觉得糟心。

  优化之后效果

  界面是不是友好多了！下边看看如何实现吧~其实超简单！

  实现原理

  其实只需要在乱码的页面上加一个小小的页面处理就好了，引入：

 <%@ include file="../common/loadingDiv.jsp"%>

  loadingDiv.jsp文件内容：

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<div id='loadingDiv' style="position: absolute; z-index: 1000; top: 0px; left: 0px;
width: 100%; height: 100%; background: white; text-align: center;">
    <h1 style="top: 48%; position: relative;">
        <font color="#15428B">努力加载中···</font>
    </h1>
</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, 1000);
    }
</script>

   里边最重要的一句话：$:parser.onComplete. 这个是在所有组件解析完成后执行的事件。其实这个事件很有用

的。很多在布局用到easyui的时候总会出现一个问题。就是在一进入主界面的时候，页面的并不是马上就展现，而是

会有一个混乱的过程，之后一闪就又好了。

  其实这个就是因为easyui是在dom载入完毕之后才会对整个页面进行解析，当你们布局和组件使用的比较多的时

候，完整的解析组件就需要一个过程，而在这个过程中就会出现短暂的界面混乱现象。

  要解决这个问题其实只要好好利用这个onComplete 事件在结合一个载入遮罩就解决问题了。

  总结

  之前的问题，也算是解决了，不过解决办法比较土，用的css样式的display，让页面完全加载出来，再给display

赋值为block，但是这次没有成功，也幸亏没成功，不然都不知道大家都有这个问题呢~~~果然，发现问题，比解决问

题，更有学问~~~