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>

以上内容是小编给大家介绍的EasyUI闪屏EasyUI页面加载提示，希望对大家以上帮助！

赞 (0)

相关推荐

  • C#双缓冲实现方法(可防止闪屏)

    本文实例讲述了C#双缓冲实现方法.分享给大家供大家参考,具体如下: // 该调用是 Windows.Forms 窗体设计器所必需的. InitializeComponent(); // TODO: 在 InitComponent 调用后添加任何初始化 this.SetStyle(ControlStyles.AllPaintingInWmPaint,true); //开启双缓冲 this.SetStyle(ControlStyles.DoubleBuffer,true); this.SetStyl

  • Android中闪屏实现方法小结(普通闪屏、倒计时闪屏、倒计时+动画闪屏)

    Android中闪屏实现方法小结(普通闪屏、倒计时闪屏、倒计时+动画闪屏)

    一.项目目录结构 二.activity_main.xml代码 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match

  • Android闪屏效果实现方法

    本文实例讲述了Android闪屏效果实现方法.分享给大家供大家参考,具体如下: 闪屏,就是SplashScreen,也可以说是启动画面,就是启动的时候,闪(展示)一下,持续数秒后,自动关闭. android的实现非常简单,使用Handler对象的postDelayed方法就可以实现.在这个方法里传递一个Runnable对象和一个延迟的时间.该方法实现了一个延迟执行的效果,延迟的时间由第2个参数指定,单位是毫秒.第一个参数是Runnable对象,里面包含了延迟后需要执行的操作.demo代码如下:

  • Android切换至SurfaceView时闪屏（黑屏闪一下）以及黑屏移动问题的解决方法

    1.最近的项目中,有一个Activity用到Fragment+ViewPager,其中一个fragment中实现了视频播放的功能,包含有SurfaceView.结果,每次打开程序第一次进入到该Activity时都会闪屏黑一下.原因就出在SurfaceView. 详解: I think I found the reason for the black flash. In my case I'm using a SurfaceView inside a Fragment and dynamicall

  • Android实现闪屏及注册和登录界面之间的切换效果

    Android实现闪屏及注册和登录界面之间的切换效果

    在没给大家介绍正文之前先给大家说下实现思路: 先分别实现闪屏.注册界面.登录界面的活动,再用Intent将相关的活动连接起来,实现不同活动之间的跳转.此次试验代码较多,我只列出主要代码,详细的代码可用底部的下载链接下载. 一.实验效果图: 二.主要代码: (1)WelcomeActivity.Java(这部分代码实现的是第一页的欢迎页面) package com.example.flashscreendemo; import android.app.Activity; import androi

  • Android 实现闪屏页和右上角的倒计时跳转实例代码

    Android 实现闪屏页和右上角的倒计时跳转实例代码

    以前编程的时候,遇到倒计时的功能时,经常自己去写,但其实Android已经帮封装好了一个倒计时类CountDownTimer,其实是将后台线程的创建和Handler队列封装成为了一个方便的类调用. 闪屏页用到了handler和CountDownTimer类,还需配置一下Activity的主题,这里是:android:theme="@android:style/Theme.NoTitleBar.Fullscreen" 全屏主题的意思. 给大家展示下效果图: 代码如下所示: package

  • Android实现闪屏欢迎界面

    闪屏:在打开App时,展示,持续数秒后,自动关闭,进入另外的一个界面,SplashActivity跳转到MainActivity Android中有三种实现方法 xml代码: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&q

  • 背景，文字渐变（无闪屏）

    背景变换 2/3||c==0)&&c0) { c-- d[a]=1; } else d[a]=0; } return c } function do_it(a,c) { if ((d[a]==2&&c0)||c==255) { c--; d[a]=1; } if (a==3) { if (d[1]==0&&d[2]==0&&d[3]==0) flag=1 } return c } function disco() { if (flag==0)

  • android实现Splash闪屏效果示例

    本文实例讲述了android实现Splash闪屏效果的方法.分享给大家供大家参考,具体如下: Java代码: public class Splash extends Activity{ private final int SPLASH_DISPLAY_LENGHT = 1000; @Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCre

  • 详谈闪屏页相关处理

    详谈闪屏页相关处理

    根据功能模块划分(Android开发推荐此方法) - Activity   mobilesafe.activty     - 后台服务   mobilesafe.service     - 广播接受者 mobilesafe.receiver     - 数据库 mobilesafe.db.dao     - 对象(java bean) mobilesafe.domain/bean     - 自定义控件 mobilesafe.view     - 工具类 mobilesafe.utils    

随机推荐