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 相关文章推荐
彪哥1.1(智能表格)提供下载
Sep 07 Javascript
childNodes.length与children.length的区别
May 14 Javascript
js实现基于正则表达式的轻量提示插件
Aug 29 Javascript
实现一个简单的vue无限加载指令方法
Jan 10 Javascript
ES6学习教程之块级作用域详解
Oct 09 Javascript
vue首次赋值不触发watch的解决方法
Sep 11 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 Javascript
深入了解JavaScript 防抖和节流
Sep 12 Javascript
JavaScript算法学习之冒泡排序和选择排序
Nov 02 Javascript
OpenLayers加载缩放控件使用方法详解
Sep 25 Javascript
npm全局环境变量配置详解
Dec 15 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 随机数的深入理解
2013/06/05 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
深入浅析yii2-gii自定义模板的方法
2016/04/26 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
中文输入法不触发onkeyup事件的解决办法
2014/07/09 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
js实现常用排序算法
2016/08/09 Javascript
js style.display=block显示布局错乱问题的解决方法
2016/09/21 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
2017/04/23 Javascript
JS ES6多行字符串与连接字符串的表示方法
2017/04/26 Javascript
iframe与主框架跨域相互访问实现方法
2017/09/14 Javascript
npm 更改默认全局路径以及国内镜像的方法
2018/05/16 Javascript
vue-cli3环境变量与分环境打包的方法示例
2019/02/18 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
[01:11:10]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG加赛
2014/05/26 DOTA
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
[50:02]完美世界DOTA2联赛循环赛 Magma vs IO BO2第一场 11.01
2020/11/02 DOTA
pymongo实现多结果进行多列排序的方法
2015/05/16 Python
tensorflow 获取变量&amp;打印权值的实例讲解
2018/06/14 Python
python随机模块random的22种函数(小结)
2020/05/15 Python
优质有机椰子产品:Dr. Goerg
2019/09/24 全球购物
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/01/13 面试题
大学生社会实践自我鉴定
2014/03/24 职场文书
安全生产演讲稿
2014/05/09 职场文书
学雷锋树新风演讲稿
2014/05/10 职场文书
迎新晚会策划方案
2014/06/13 职场文书
房产分割协议书范文
2014/11/21 职场文书
2014年度安全工作总结
2014/12/04 职场文书
2016同学毕业寄语大全
2015/12/04 职场文书
团队合作精神学习心得体会
2016/01/19 职场文书
会计做账心得体会
2016/01/22 职场文书
大学生创业计划书常用模板
2019/08/07 职场文书