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 Validate插件实现表单强大的验证功能
Dec 18 Javascript
Bootstrap CSS组件之导航(nav)
Dec 17 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
Feb 09 Javascript
Angular中实现树形结构视图实例代码
May 05 Javascript
ES6入门教程之let和const命令详解
May 17 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
swiper 解决动态加载数据滑动失效的问题
Feb 26 Javascript
vue注册组件的几种方式总结
Mar 08 Javascript
微信小程序实现发红包功能
Jul 11 Javascript
记一次vue-webpack项目优化实践详解
Feb 17 Javascript
详解elementui之el-image-viewer(图片查看器)
Aug 30 Javascript
vue-cli设置publicPath小记
Apr 14 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
解析link_mysql的php版
2013/06/30 PHP
PHP获取数组中重复最多的元素的实现方法
2014/11/11 PHP
yii2分页之实现跳转到具体某页的实例代码
2016/06/02 PHP
laravel-admin的图片删除实例
2019/09/30 PHP
javascript类继承机制的原理分析
2009/09/12 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
浅析Node.js实现HTTP文件下载
2016/08/05 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
2016/09/05 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
react系列从零开始_简单谈谈react
2017/07/06 Javascript
关于在mongoose中填充外键的方法详解
2017/08/14 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
vue指令做滚动加载和监听等
2019/05/26 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
2019/10/09 Javascript
JavaScript经典案例之简易计算器
2020/08/24 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
解决Python字典写入文件出行首行有空格的问题
2017/09/27 Python
python 保存float类型的小数的位数方法
2018/10/17 Python
PyQt5多线程刷新界面防假死示例
2019/12/13 Python
基于python实现模拟数据结构模型
2020/06/12 Python
scrapy在python爬虫中搭建出错的解决方法
2020/11/22 Python
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
HTML5 canvas基本绘图之文字渲染
2016/06/27 HTML / CSS
汇集了世界上最好的天然和有机美容产品:LoveLula
2018/02/05 全球购物
李维斯牛仔裤荷兰官方网站:Levi’s NL
2020/08/23 全球购物
工程部主管岗位职责
2013/11/17 职场文书
优秀员工年终发言演讲稿
2014/01/01 职场文书
学生请假条格式
2014/04/11 职场文书
单位在职证明书
2014/09/11 职场文书
贫困证明模板(3篇)
2014/09/16 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python