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 相关文章推荐
统计jQuery中各字符串出现次数的工具
May 03 Javascript
jquery中对于批量deferred的处理方法
Jan 22 Javascript
Javascript连接多个数组不用concat来解决
Mar 24 Javascript
详解node.js平台下Express的session与cookie模块包的配置
Apr 26 Javascript
Vuex实现计数器以及列表展示效果
Mar 10 Javascript
原生JS实现的雪花飘落动画效果
May 03 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
Aug 19 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
Oct 10 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 Javascript
JavaScript编写开发动态时钟
Jul 29 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之第八天
2006/10/09 PHP
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
php计算整个目录大小的方法
2015/06/01 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
php连接mysql数据库
2017/03/21 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
asp.net HttpHandler实现图片防盗链
2009/11/09 Javascript
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
js/jQuery简单实现选项卡功能
2014/01/02 Javascript
vuejs父子组件通信的问题
2017/01/11 Javascript
激动人心的 Angular HttpClient的源码解析
2017/07/10 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
2017/08/07 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
JavaScript中var、let、const区别浅析
2018/06/24 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
2019/05/16 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
2019/10/16 Javascript
JavaScript定时器常见用法实例分析
2019/11/15 Javascript
[01:31:03]DOTA2完美盛典全回顾 见证十五项大奖花落谁家
2017/11/28 DOTA
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
Python中方法链的使用方法
2016/02/23 Python
Python加载带有注释的Json文件实例
2018/05/23 Python
python 文件查找及内容匹配方法
2018/10/25 Python
对Django 中request.get和request.post的区别详解
2019/08/12 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
音频处理 windows10下python三方库librosa安装教程
2020/06/20 Python
航空大学应届生求职信
2013/11/10 职场文书
抗震救灾标语
2014/06/26 职场文书
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
大学生个人简历自荐信
2015/03/06 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
大学生读书笔记范文
2015/07/01 职场文书
小学运动会开幕词
2016/03/04 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
关于党风廉政建设宣传教育月的活动总结!
2019/08/08 职场文书
Python采集股票数据并制作可视化柱状图
2022/04/04 Python