.net web加载时出现正在加载的效果-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_11981/article/details/82399245

本文介绍三种在网页加载过程中显示进度条的方法，包括使用JavaScript定时更新进度文本、直接在页面加载事件中动态生成进度条及通过外部HTML文件结合后端脚本实现动态进度更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一：
1、添加引用
using System.Threading;
2、在页面加载时
protected void Page_Load(object sender, EventArgs e)
{以下是进度条
Response.Write("<div style='COLOR: red; POSITION: absolute; ' 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(1000);

}
3、在后台脚本添加
<script language="javascript">

HideWait();
</script>

方法二：
首先建一个HTML面，源码为：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" id="mainWindow" >
<head >
<title >无标题页 </title >
<script language="javascript" type="text/javascript" >
function SetPorgressBar(pos)
{
//设置进度条居中
var screenHeight = window["mainWindow"].offsetHeight;
var screenWidth = window["mainWindow"].offsetWidth;
ProgressBarSide.style.width = Math.round(screenWidth / 4);
ProgressBarSide.style.left = Math.round(screenWidth / 3);
ProgressBarSide.style.top = Math.round(screenHeight / 2);
ProgressBarSide.style.height = "21px";
ProgressBarSide.style.display = "";

//设置进度条百分比
ProgressBar.style.width = pos + "%";
ProgressText.innerHTML = "正在加载,请稍后....." + pos + "%";
}

//完成后隐藏进度条
function SetCompleted()
{
ProgressBarSide.style.display = "none";
MyTable.style.display="none";
}
</script >
</head >
<body >
<!-- <div id="mydiv" style="width: 224px" >数据处理中.... </div >-- >
<div id="ProgressBarSide" style="position:absolute;height:21px;width:100px;color:Silver;border-width:1px;border-style:Solid;display:none" >
<div id="ProgressBar" style="position:absolute;height:21px;width:0%;background-color:PaleTurquoise" > </div >
<div id="ProgressText" style="position:absolute;height:21px;width:100%;text-align:center" > </div >

</div >
</body >
</html >

在你要显示的页面page_load，代码：
if (!Page.IsPostBack)
{
beginProgress();

for (int i = 1; i <= 100; i++)
{
setProgress(i);

//此处用线程休眠代替实际的操作，如加载数据等
System.Threading.Thread.Sleep(20);
}

finishProgress();
}

函数：
/// <summary >
///显示进度条
/// </summary >

private void beginProgress()
{
//根据ProgressBar.htm显示进度条界面
string templateFileName = Path.Combine(Server.MapPath("."), "ProgressBar.htm");
StreamReader reader = new StreamReader(@templateFileName,System.Text.Encoding.GetEncoding("GB2312"));
string html = reader.ReadToEnd();
reader.Close();
Response.Write(html);
Response.Flush();
}

private void setProgress(int percent)
{
string jsBlock = " <script >SetPorgressBar( "" + percent.ToString() + " "); </script >";
Response.Write(jsBlock);
Response.Flush();
}

private void finishProgress()
{
string jsBlock = " <script >SetCompleted(); </script >";
Response.Write(jsBlock);
Response.Flush();
}

方法三：

1. 进度条模板文件 ProgressBar.htm
1 < HTML >
2 < head >
3 < title ></ title >
4 < script language ="JavaScript" >
5 // 设置进度条进度
6 function SetPorgressBar(msg, pos)
7 {
8 ProgressBar.style.width = pos + " % " ;
9 WriteText( " Msg1 " ,msg + " 已完成 " + pos + " % " );
10 }
11
12 // 设置进度条完成信息
13 function SetCompleted(msg)
14 {
15 if (msg == "" )
16 WriteText( " Msg1 " , " 完成。 " );
17 else
18 WriteText( " Msg1 " ,msg);
19 }
20
21 // 更新文本显示信息
22 function WriteText(id, str)
23 {
24 var strTag = ' < font face = " Verdana, Arial, Helvetica " size = " 2 " color = " #ea9b02 " >< B > ' + str + ' </ B ></ font > ';
25 if (document.all) document.all[id].innerHTML = strTag;
26 }
27 </ script >
28 </ head >
29 < body >
30 < div id ="Msg1" >< font face ="Verdana, Arial, Helvetica" size ="2" color ="#ea9b02" >< b > 正在加载

</ b ></ font ></ div >
31 < div id ="ProgressBarSide" style ="color:Silver;border-width:1px;border-style:Solid;width:300px;" >
32 < div id ="ProgressBar" style ="background-color:#3366FF; height:21px; width:0%;" ></ div >
33 </ div >
34 </ body >
35 </ HTML >

2. Default.ASPx

1 protected void Page_Load( object sender, EventArgs e)
2 {
3 // 根据 ProgressBar.htm 显示进度条界面
4 string templateFileName = Path.Combine(Server.MapPath( " . " ), " ProgressBar.htm " );
5 StreamReader reader = new StreamReader(@templateFileName,System.Text.Encoding.GetEncoding( " gb2312 " ));
6 string HTML = reader.ReadToEnd();
7 reader.Close();
8 Response.Write(HTML);
9 Response.Flush();
10 System.Threading.Thread.Sleep( 200 );
11
12 // 根据处理任务处理情况更新进度条
13 string jsBlock;
14 for ( int i = 1 ; i <= 100 ; i ++ )
15 {
16 System.Threading.Thread.Sleep( 10 );
17 jsBlock = " <script>SetPorgressBar(' " + " A " + i.ToString() + " ',' " + i.ToString() + " '); </script> " ;
18
19 Response.Write(jsBlock);
20 Response.Flush();
21 }
22
23 // 处理完成
24 jsBlock = " <script>SetCompleted('处理完成。'); </script> " ;
25 Response.Write(jsBlock);
26 Response.Flush();
27 }