本文主要为大家详细展示了EasyUI闪屏EasyUI页面加载提示实现例子,在使用EasyUI的时候,有一个经常会遇到的问题,那就是页面还未渲染完成的时候就展现了。刚开始会非常混乱,等加载完成以后就好了。
$.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> t;/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>