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 相关文章推荐
TFDN图片播放器 不错自动播放
Oct 03 Javascript
DIV菜单层实现代码
Nov 19 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
Jun 26 Javascript
Javascript中使用parseInt函数需要注意的问题
Apr 02 Javascript
JavaScript获取表单enctype属性的方法
Apr 02 Javascript
JavaScript实现定时隐藏与显示图片的方法
Aug 06 Javascript
jqGrid中文文档之选项设置
Dec 02 Javascript
漂亮! js实现颜色渐变效果
Aug 12 Javascript
js完整倒计时代码分享
Sep 18 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
Mar 30 Javascript
详解react内联样式使用webpack将px转rem
Sep 13 Javascript
vue打包相关细节整理(小结)
Sep 28 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实例分享判断客户端是否使用代理服务器及其匿名级别
2014/06/04 PHP
CI框架常用函数封装实例
2016/11/21 PHP
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
javascript中常用编程知识
2013/04/08 Javascript
js arguments,jcallee caller用法总结
2013/11/30 Javascript
原生js和jQuery随意改变div属性style的名称和值
2014/10/22 Javascript
javascript的函数作用域
2014/11/12 Javascript
AngularJS 简单应用实例
2016/07/28 Javascript
AngularJS 模块化详解及实例代码
2016/09/14 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
js定时器实现倒计时效果
2017/11/05 Javascript
Angular HMR(热模块替换)功能实现方法
2018/04/04 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
2018/05/08 Javascript
微信小程序实现运动步数排行功能(可删除)
2018/07/05 Javascript
详解vue中axios的封装
2018/07/18 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
2019/10/22 Javascript
ES11屡试不爽的新特性,你用上了几个
2020/10/21 Javascript
python实现问号表达式(?)的方法
2013/11/27 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
Python使用到第三方库PyMuPDF图片与pdf相互转换
2019/05/03 Python
Python读写文件基础知识点
2019/06/10 Python
python实现QQ批量登录功能
2019/06/19 Python
Django框架之DRF 基于mixins来封装的视图详解
2019/07/23 Python
Django实现跨域请求过程详解
2019/07/25 Python
python如何通过twisted搭建socket服务
2020/02/03 Python
详解Django中views数据查询使用locals()函数进行优化
2020/08/24 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
微软英国官方网站:Microsoft英国
2016/10/15 全球购物
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
创业计划书中要认真思考的问题
2013/12/28 职场文书
和平主题的演讲稿
2014/01/12 职场文书
2014年安全生产责任书
2014/07/22 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
车间安全生产管理制度
2015/08/06 职场文书
mysql下的max_allowed_packet参数设置详解
2022/02/12 MySQL