js loading加载效果实现代码


Posted in Javascript onNovember 24, 2009
protected void Page_Load(object sender, EventArgs e) 
{ 
ShowLoading(); 
System.Threading.Thread.Sleep(10000); 
ClientScript.RegisterClientScriptBlock(typeof(string), "", "<script>document.body.onload=function(){removeLoadMsg();}</script>"); 
} /// <summary> 
/// 显示页面正在加载中效果 
/// </summary> 
public void ShowLoading() 
{ 
StringBuilder s = new StringBuilder(); 
s.Append(" <script language=JavaScript type=text/javascript>\n"); 
s.Append(" var t_id = setInterval(animate,20);\n"); 
s.Append(" var pos=0;var dir=2;var len=0;\n"); 
s.Append(" function animate(){\n"); 
s.Append(" var elem = document.getElementById('progress');\n"); 
s.Append(" if(elem != null) {\n"); 
s.Append(" if (pos==0) len += dir;\n"); 
s.Append(" if (len>32 || pos>79) pos += dir;\n"); 
s.Append(" if (pos>79) len -= dir;\n"); 
s.Append(" if (pos>79 && len==0) pos=0;\n"); 
s.Append(" elem.style.left = pos;\n"); 
s.Append(" elem.style.width = len;\n"); 
s.Append(" }}\n"); 
s.Append(" function removeLoadMsg() {\n"); 
s.Append(" this.clearInterval(t_id);\n"); 
s.Append(" var targelem = document.getElementById('loader_container');\n"); 
s.Append(" targelem.style.display='none';\n"); 
s.Append(" targelem.style.visibility='hidden';\n"); 
s.Append(" }\n "); 
s.Append("</script>\n"); 
s.Append("<style>"); 
s.Append("#loader_container {text-align:center; position:absolute; top:40%; width:100%; left: 0;}\n"); 
s.Append("#loader {font-family:Tahoma, Helvetica, sans; font-size:11.5px; color:#000000; background-color:#FFFFFF; padding:10px 0 16px 0; margin:0 auto; display:block; width:130px; border:1px solid #5a667b; text-align:left; z-index:9999;}\n"); 
s.Append("#progress {height:5px; font-size:1px; width:1px; position:relative; top:1px; left:0px; background-color:#8894a8;}\n"); 
s.Append("#loader_bg {background-color:#e4e7eb; position:relative; top:8px; left:8px; height:7px; width:113px; font-size:1px;}\n"); 
s.Append("</style>\n"); 
s.Append("<div id=loader_container>\n"); 
s.Append("<div id=loader>\n"); 
s.Append("<div align=center>页面正在加载中...</div>\n"); 
s.Append("<div id=loader_bg><div id=progress> </div></div>\n"); 
s.Append("</div></div>\n "); 
//HttpContext.Current.Response.Write(s.ToString()); 
HttpContext.Current.Response.Write(s.ToString()); 
//HttpContext.Current.Response.Flush();
Javascript 相关文章推荐
网页中CDATA标记的说明
Sep 12 Javascript
JavaScript判断变量是对象还是数组的方法
Aug 28 Javascript
javascript定义变量时加var与不加var的区别
Dec 22 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
Jan 08 Javascript
JavaScript事件委托用法分析
Jan 24 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
Oct 26 Javascript
将JSON字符串转换成Map对象的方法
Nov 30 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
详解Vue双向数据绑定原理解析
Sep 11 Javascript
vue中$nextTick的用法讲解
Jan 17 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
May 16 Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 20 Javascript
jquery.ui.draggable中文文档
Nov 24 #Javascript
JS 实现双色表格实现代码
Nov 24 #Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
Nov 24 #Javascript
asp.net下利用js实现返回上一页的实现方法小集
Nov 24 #Javascript
dropdownlist之间的互相联动实现(显示与隐藏)
Nov 24 #Javascript
根据鼠标的位置动态的控制层的位置
Nov 24 #Javascript
js cookies实现简单统计访问次数
Nov 24 #Javascript
You might like
PHP 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
PHP 根据IP地址控制访问的代码
2010/04/22 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
一个PHP实现的轻量级简单爬虫
2015/07/08 PHP
js定时器怎么写?就是在特定时间执行某段程序
2013/10/11 Javascript
Jquery实现的tab效果可以指定默认显示第几页
2013/10/16 Javascript
JavaScript中检测变量是否存在遇到的一些问题
2013/11/11 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
JS实现仿QQ聊天窗口抖动特效
2015/05/10 Javascript
JavaScript模板引擎用法实例
2015/07/10 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
JavaScript调试之console.log调试的一个小技巧分享
2017/08/07 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
2017/10/12 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
2018/01/08 Javascript
浅谈Postman解决token传参的问题
2018/03/31 Javascript
Vue props 单向数据流的实现
2018/11/06 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
2019/05/16 Javascript
Django数据库操作的实例(增删改查)
2017/09/04 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
python实现单链表的方法示例
2019/09/03 Python
python3中sys.argv的实例用法
2020/04/24 Python
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
database面试题
2013/03/28 面试题
解释一下钝化(Swap out)
2016/12/26 面试题
军训教官感言
2014/03/02 职场文书
岗位明星事迹材料
2014/05/18 职场文书
股东授权委托书范文
2014/09/13 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
采购员工作总结范文
2015/08/12 职场文书
小学体育组工作总结
2015/08/13 职场文书
部门主管竞聘书
2015/09/15 职场文书
干部外出学习心得体会
2016/01/18 职场文书
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL