用div显示页面加载进度条

原创 2007年10月02日 20:46:00

对于加载时间比较长的ASP.NET页面,我们可以在客户端浏览器中显示进度条来显示页面正在装载。下面就是具体的实现过程

 

首先填加 引用 Using System.Threading;

 然后在Page_Load事件中添加如下代码:

Response.Write("<div id='mydiv' >");
Response.Write("_");
Response.Write("</div>");
Response.Write("<script>mydiv.innerText = '';</script>");
Response.Write("<script language=javascript>;");
Response.Write("var dots = 0;var dotmax = 10;function ShowWait()");
Response.Write("{var output; output = '正在装载页面';dots++;if(dots>=dotmax)dots=1;");
Response.Write("for(var x = 0;x < dots;x++){output += '·';}mydiv.innerText =  output;}");
Response.Write("function StartShowWait(){mydiv.style.visibility = 'visible'; ");
Response.Write("window.setInterval('ShowWait()',1000);}");
Response.Write("function HideWait(){mydiv.style.visibility = 'hidden';");
Response.Write("window.clearInterval();}");
Response.Write("StartShowWait();</script>");
Response.Flush();
Thread.Sleep(10000);

最后在html页面中添加

<script>

HideWait();

</script>

【HTML】- 网页加载进度条

通过定时器以及加载状态事件制作进度条
  • baidu_35701759
  • baidu_35701759
  • 2017年07月10日 10:15
  • 472

纯DIV+CSS实现进度条

效果图: 进度条测试 .progress { overflow: hidden; height: 20px; margin-bottom: 20px; m...
  • xqq580231
  • xqq580231
  • 2017年09月26日 10:26
  • 197

HTML5 CSS3 诱人的实例 : 网页加载进度条的实现,下载进度条等

今天给大家带来一个比较炫的进度条,进度条在一耗时操作上给用户一个比较好的体验,不会让用户觉得在盲目等待,对于没有进度条的长时间等待,用户会任务死机了,毫不犹豫的关掉应用;一般用于下载任务,删除大量任务...
  • lmj623565791
  • lmj623565791
  • 2014年06月26日 12:06
  • 47228

进度条加载后显示页面

1. 思路:加入很多图片,以延迟加载时间,实现加载完后显示图片。定义一个外层DIV,覆盖住图片,在内层DIV中引入加载时显示的图片,让内层DIV居中在页面上,利用setInterval定时器设置3秒...
  • chaofei_liang
  • chaofei_liang
  • 2017年09月09日 09:27
  • 331

页面加载进度条原理

DEMO
  • u014737974
  • u014737974
  • 2016年01月29日 14:39
  • 711

js网页顶部线性页面加载进度条,jquery头部线性进度条总结

前言 网页顶部加载进度条,近年来很流行,很多网站都采用了这种加载方式。网上也有这样类似的插件,今天我们总结一下网页顶部线性页面加载进度条。 静态效果如下:点击运行可以测试效果! 头部Loa...
  • Esther_Heesch
  • Esther_Heesch
  • 2016年04月12日 16:06
  • 1422

变态的网页加载进度条实现思路

文章转至:http://ucren.com/blog/archives/17 以下这两种情况: 网页不间断地下载并逐步把已下载完成的部分呈现出来;网页先显示出一个框架后,等待一切资源准备完...
  • yzbben
  • yzbben
  • 2017年02月13日 17:12
  • 536

如何检测网页的加载进度。从而编写进度条

对于如何检测网页加载进度这个问题,百度了一下,没有好的答案。可以说是没有答案。但是找到了一个开源项目。 pace.js如何想直接用现成的进度条。这个库很丰富,现在想要分析一下它的源代码来了解,如何检...
  • xiaoseqingchun
  • xiaoseqingchun
  • 2015年06月06日 15:04
  • 4332

页面加载的进度条显示

页面加载的进度条显示在标签中加入下面代码即可                        请稍等,正在加载......                       function window.o...
  • shearlock
  • shearlock
  • 2004年08月14日 15:04
  • 2148

页面加载显示进度条

页面加载显示进度条 *{ margin:0; } .loading{ background:#FF6100; /*设置进度条的颜色*/ height:5p...
  • libinemail
  • libinemail
  • 2016年01月11日 20:44
  • 616
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用div显示页面加载进度条
举报原因:
原因补充:

(最多只允许输入30个字)