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加解密 脚本解密
Feb 22 Javascript
Mootools 1.2教程 Fx.Tween的使用
Sep 15 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
Dec 28 Javascript
jQuery $.data()方法使用注意细节
Dec 31 Javascript
VUE开发一个图片轮播的组件示例代码
Mar 06 Javascript
JS+HTML5实现图片在线预览功能
Jul 22 Javascript
ES6解构赋值实例详解
Oct 31 Javascript
React组件对子组件children进行加强的方法
Jun 23 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
分享Angular http interceptors 拦截器使用(推荐)
Nov 10 Javascript
node.js 微信开发之定时获取access_token
Feb 07 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
Jul 01 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使用filter过滤器验证邮箱 ipv6地址 url验证
2013/12/25 PHP
[原创]smarty简单模板变量输出方法
2016/07/09 PHP
javascript学习笔记(三) String 字符串类型介绍
2012/06/19 Javascript
JS获取几种URL地址的方法小结
2014/02/26 Javascript
基于jquery实现的树形菜单效果代码
2015/09/06 Javascript
JavaScript中的原始值和复杂值
2016/01/07 Javascript
js实现精确到秒的倒计时效果
2016/05/29 Javascript
javascript url几种编码方式详解
2016/06/06 Javascript
总结十个Angular.js由浅入深的面试问题
2016/08/26 Javascript
详解react如何在组件中获取路由参数
2017/06/15 Javascript
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
[js高手之路]寄生组合式继承的优势详解
2017/08/28 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
2018/01/31 jQuery
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
详解Chart.js轻量级图表库的使用经验
2018/05/22 Javascript
IE9 elementUI文件上传的问题解决
2018/10/17 Javascript
Vue Extends 扩展选项用法完整实例
2019/09/17 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
[46:00]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第一局
2016/03/03 DOTA
二种python发送邮件实例讲解(python发邮件附件可以使用email模块实现)
2013/12/03 Python
python生成日历实例解析
2014/08/21 Python
python 采集中文乱码问题的完美解决方法
2016/09/27 Python
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
基于Python测试程序是否有错误
2020/05/16 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
Python第三方包PrettyTable安装及用法解析
2020/07/08 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
Melissa鞋英国官方网站:Nonnon
2019/05/01 全球购物
法学个人求职信范文
2014/01/27 职场文书
食品厂厂长岗位职责
2014/01/30 职场文书
市政工程技术专业自荐书
2014/07/06 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
客服专员岗位职责
2015/02/10 职场文书
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python