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 相关文章推荐
Js 去掉字符串中的空格(实现代码)
Nov 19 Javascript
深入探讨javascript函数式编程
Oct 11 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
Sep 17 Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 Javascript
JavaScript实现星星等级评价功能
Mar 22 Javascript
JavaScript阻止表单提交方法(附代码)
Aug 15 Javascript
mui框架移动开发初体验详解
Oct 11 Javascript
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
bootstrap 通过加减按钮实现输入框组功能
Nov 15 Javascript
React路由管理之React Router总结
May 10 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 Javascript
OpenLayer学习之自定义测量控件
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
详解:――如何将图片储存在数据库里
2006/12/05 PHP
让的PHP代码飞起来的40条小技巧(提升php效率)
2010/04/12 PHP
php面向对象 字段的声明与使用
2012/06/14 PHP
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
javascript String 对象
2008/04/25 Javascript
javascript 处理HTML元素必须避免使用的一种方法
2009/07/30 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
Vue开发之封装上传文件组件与用法示例
2019/04/25 Javascript
nodejs中实现用户注册路由功能
2019/05/20 NodeJs
vue 中固定导航栏的实例代码
2019/11/01 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
使用js获取身份证年龄的示例代码
2020/12/11 Javascript
Python中使用md5sum检查目录中相同文件代码分享
2015/02/02 Python
Python开发的实用计算器完整实例
2017/05/10 Python
python动态视频下载器的实现方法
2019/09/16 Python
用Python写一个自动木马程序
2019/09/17 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
浅谈pymysql查询语句中带有in时传递参数的问题
2020/06/05 Python
为什么相对PHP黑python的更少
2020/06/21 Python
用python 绘制茎叶图和复合饼图
2021/02/26 Python
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
经典c++面试题二
2015/08/14 面试题
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
清洁工岗位职责
2014/01/29 职场文书
《搭石》教学反思
2014/04/07 职场文书
初中学生评语大全
2014/04/24 职场文书
2014学校领导四风对照检查材料思想汇报
2014/09/23 职场文书
Axios代理配置及封装响应拦截处理方式
2022/04/07 Vue.js