EasyUI闪屏,EasyUI页面加载提示:原理+代码+效果图

Posted 小雷FansUnion

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了EasyUI闪屏,EasyUI页面加载提示:原理+代码+效果图相关的知识,希望对你有一定的参考价值。

使用EasyUI时,有个经常遇到的问题,页面还没有渲染完成的时候,就展现了。

刚刚开始很混乱,等加载完成后,就好了。


参考这篇文章http://blog.csdn.net/zheng0518/article/details/12287801 搞定了。


        $.parser.onComplete,这个是在所有组件解析完成后执行的事件。其实这个事件很有用的。很多在布局用到easyui的时候总会出现一个问题。就是在一进入主界面的时候,页面的并不是马上就展现,而是会有一个混乱的过程,之后一闪就又好了。

      其实这个就是因为easyui是在dom载入完毕之后才会对整个页面进行解析,当你们布局和组件使用的比较多的时候,完整的解析组件就需要一个过程,而在这个过程中就会出现短暂的界面混乱现象。

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

     

    把需要这个动画效果的,放到一个页面中去。

     <#include "common/loadingDiv.html"/>(Freemarker的include语法,模版用的.html后缀)

loadingDiv.html

 

  <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>  

以上是关于EasyUI闪屏,EasyUI页面加载提示:原理+代码+效果图的主要内容,如果未能解决你的问题,请参考以下文章

easyui中easyui-dialog显示问题!

easyui中加载两个对话框画面显示错误

EasyUI 学习-Tooltip(提示框)

EasyUI系列学习-Tooltip(提示框)

Easyui 页面设置加载完成之后,满屏

第一百九十六节,jQuery EasyUI,Tooltip(提示框)组件