easyui为页面加载添加遮罩层
来源:互联网 发布:一次性乳胶手套淘宝 编辑:程序博客网 时间:2024/05/20 18:50
前面一直在讲EasyUI的用法,我也是最近在用这个东西,觉得这个组件里面还是有很多问题,很多的不足。比如,如果你加载一个带有弹出框的表格页面,如果加载速度很慢的话会出现下面的效果:
即很长一段时间会出现窗口没有初始化的效果,等一段时间后就会初始化完成,就没有这个画面,但是如果网速很慢的话会出现想当一段时间的白色,那么如果用户看来,可能会以为效果出了问题。
我们如何来解决这个问题呢?最好的方式是加上遮罩层,等待效果。可是我并不想去在找个遮罩组件了,所以我自己从easyUI中提取了等待效果的遮罩。如下图:
这一个js,可以导入到页面中即可。不用再其他部分添加任何代码.js代码如下:
jgxLoader.js
- /**
- * 页面加载等待页面
- *
- * @author gxjiang
- * @date 2010/7/24
- *
- */
- var height = window.screen.height-250;
- var width = window.screen.width;
- var leftW = 300;
- if(width>1200){
- leftW = 500;
- }else if(width>1000){
- leftW = 350;
- }else {
- leftW = 100;
- }
- var _html = "<div id='loading' style='position:absolute;left:0;width:100%;height:"+height+"px;top:0;background:#E0ECFF;opacity:0.8;filter:alpha(opacity=80);'>\
- <div style='position:absolute; cursor1:wait;left:"+leftW+"px;top:200px;width:auto;height:16px;padding:12px 5px 10px 30px;\
- background:#fff url(/wlzl/js/themes/default/images/pagination_loading.gif) no-repeat scroll 5px 10px;border:2px solid #ccc;color:#000;'>\
- 正在加载,请等待...\
- </div></div>";
- window.onload = function(){
- var _mask = document.getElementById('loading');
- _mask.parentNode.removeChild(_mask);
- }
- document.write(_html);
/** * 页面加载等待页面 * * @author gxjiang * @date 2010/7/24 * */ var height = window.screen.height-250; var width = window.screen.width; var leftW = 300; if(width>1200){ leftW = 500; }else if(width>1000){ leftW = 350; }else { leftW = 100; } var _html = "<div id='loading' style='position:absolute;left:0;width:100%;height:"+height+"px;top:0;background:#E0ECFF;opacity:0.8;filter:alpha(opacity=80);'>\ <div style='position:absolute;cursor1:wait;left:"+leftW+"px;top:200px;width:auto;height:16px;padding:12px 5px 10px 30px;\ background:#fff url(/wlzl/js/themes/default/images/pagination_loading.gif) no-repeat scroll 5px 10px;border:2px solid #ccc;color:#000;'>\ 正在加载,请等待...\ </div></div>"; window.onload = function(){ var _mask = document.getElementById('loading'); _mask.parentNode.removeChild(_mask); } document.write(_html);
注意这里的等待效果图 pagination_loading.gif 的位置要指正确。
将这个js导入到页面的header中最为最后一个导入的js,只有页面未加载完成就会有效果。可以试试。
加载方式如下:
不需要在其他地方加任何代码即可实现。
- easyui为页面加载添加遮罩层
- easyui为tab添加遮罩层
- easyui页面加载提示
- easyui页面加载提示
- EasyUI 页面加载等待
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
- 在easyui中为tabs标签页面板添加刷新按钮
- JQery easyui 页面加载等待信息
- jsp 页面刷新,EasyUI刷新、加载
- EasyUI闪屏,EasyUI页面加载提示:原理+代码+效果图
- 为easyui combobox添加默认选项
- 为jquery Easyui 添加小图标
- easyui 为表格行添加事件
- easyui为tabs添加右键菜单
- easyui为tabs添加右键菜单
- 软件开发过程六 项目管理
- android开发技巧汇总
- mysql 误删数据恢复
- 软件工程整体总结
- UITabBarController使用详解
- easyui为页面加载添加遮罩层
- Tomcat:IOException while loading persisted sessions: java.io.EOFException
- Android之SurfaceView简介(三)
- 规则化和模型选择(Regularization and model selection)
- windows 操作系统——自动关闭计算机
- ORACLE over函数
- easyui为tab添加遮罩层
- VS2010运行速度加快方法
- Android系统的开机画面显示过程分析