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 相关文章推荐
一个不错的用JavaScript实现的UBB编码函数
Mar 09 Javascript
HTML中的setCapture和releaseCapture使用介绍
Mar 21 Javascript
jquery 循环显示div的示例代码
Oct 18 Javascript
javascript实现当前页导航激活的方法
Feb 27 Javascript
JavaScript中return false的用法
Mar 12 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
Oct 26 Javascript
实现JavaScript高性能的数据存储
Dec 11 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
Feb 05 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
Feb 08 Javascript
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 Javascript
vue中七牛插件使用的实例代码
Jul 28 Javascript
详解javascript中的babel到底是什么
Jun 21 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中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
分享PHP计算两个日期相差天数的代码
2015/12/23 PHP
php插入含有特殊符号数据的处理方法
2016/11/24 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
javascript 面向对象全新理练之数据的封装
2009/12/03 Javascript
第五篇Bootstrap 排版
2016/06/21 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
微信小程序 转发功能的实现
2017/08/04 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
2017/09/20 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
vue项目前端错误收集之sentry教程详解
2019/05/27 Javascript
vue 实现路由跳转时更改页面title
2019/11/05 Javascript
[37:45]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第二场 12.09
2020/12/11 DOTA
Python中的魔法方法深入理解
2014/07/09 Python
Django中几种重定向方法
2015/04/28 Python
Python运算符重载用法实例分析
2015/06/01 Python
Python使用pickle模块实现序列化功能示例
2018/07/13 Python
PyTorch读取Cifar数据集并显示图片的实例讲解
2018/07/27 Python
解决python测试opencv时imread导致的错误问题
2019/01/26 Python
numpy.meshgrid()理解(小结)
2019/08/01 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
德国价格合理的品牌商品购物网站:averdo
2019/03/21 全球购物
北大自主招生自荐信
2013/10/19 职场文书
八一演出活动方案
2014/02/03 职场文书
关于雷锋的演讲稿
2014/05/10 职场文书
2014年妇联工作总结
2014/11/21 职场文书
先进党组织事迹材料
2014/12/26 职场文书
雷锋的故事观后感
2015/06/10 职场文书
人为什么会“幸灾乐祸”?
2019/08/06 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python
Python基础之条件语句详解
2021/06/16 Python
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python