昨天看了Richer上传的关于WEB页面加载时显示的进度条,但加载的数据与进度条并没有同步,而是当数据状态完成后再加载数据的,因此对其改进了下,使加载的数据与进度条几乎同步了。
却点:加重服务器的重担
1。新建一下HTML页面来显示进度条
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
<script language="javascript">
function setPgb(pgbID, pgbValue)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/ContractedSubBlock.gif)
{
var tab = document.getElementById( "tabShow" );
tab.style.cursor="wait";
if ( pgbValue <= 100 )
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
if (lblObj = document.getElementById(pgbID+'_label'))
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
lblObj.innerHTML = pgbValue + '%'; // change the label value
}
if ( pgbObj = document.getElementById(pgbID) )
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
var divChild = pgbObj.children[0];
pgbObj.children[0].style.width = pgbValue + "%";
}
window.status = "數據讀取" + pgbValue + "%請稍後
";
}
if ( pgbValue == 100 )
window.status = "數據讀取已經完成.";
}
function onLoadOver()
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/ContractedSubBlock.gif)
{
var tab = document.getElementById( "tabShow" );
tab.style.display = "none";
tab.style.cursor="auto";
window.status = "數據讀取已經完成.";
}
</script>
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
<style>
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
.bi-loading-status {
}{ PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; OVERFLOW: hidden; WIDTH: 150px; PADDING-TOP: 1px }
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
.bi-loading-status .text {
}{ PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; OVERFLOW: hidden; WIDTH: 100%; PADDING-TOP: 1px; WHITE-SPACE: nowrap; TEXT-OVERFLOW: ellipsis }
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
.bi-loading-status .progress-bar {
}{ BORDER-RIGHT: buttonshadow 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: buttonshadow 1px solid; PADDING-LEFT: 1px; BACKGROUND: window; PADDING-BOTTOM: 1px; OVERFLOW: hidden; BORDER-LEFT: buttonshadow 1px solid; WIDTH: 100%; PADDING-TOP: 1px; BORDER-BOTTOM: buttonshadow 1px solid; HEIGHT: 10px }
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
.bi-loading-status .progress-bar DIV {
}{ BACKGROUND: highlight; FILTER: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0); OVERFLOW: hidden; HEIGHT: 100% }
</style>
<html>
<body topmargin="0" leftmargin="0">
<div id="tabShow">
<table width="200" height="40" style="Z-INDEX: 100; POSITION: absolute;top:expression((document.body.clientHeight-190)/2);left:expression((document.body.clientWidth-200)/2);" bgColor="buttonface" border="1">
<tr>
<td align="center" valign="middle">
<DIV class="bi-loading-status" id="proBar" style="DISPLAY: ; LEFT: 425px; TOP: 278px">
<DIV class="text" id="pgbMain_label" align="left"></DIV>
<DIV class="progress-bar" id="pgbMain" align="left">
<DIV STYLE="WIDTH:10%"></DIV>
</DIV>
</DIV>
</td>
</tr>
</table>
</div>
</body>
</html>
2。 再看看要显示进度条页面的aspx.cs文件
private void Page_Load(object sender, System.EventArgs e)
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
ShowBar(100); /**////在頁面加載開始時就顯示進度條;100為估計的頁面延時間,可跟踞頁面加載時間適當調整
//以下為測試數據
for(int i=0;i<1000000;i++)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for(int j=0;j<10000;j++)
{}
}
DataSet ds = new DataSet();
ds.ReadXml(Server.MapPath("./Tmp.xml"));
DataGrid1.DataSource = ds.Tables["Users"];
DataGrid1.DataBind();
}
![](/Images/OutliningIndicators/ContractedBlock.gif)
這裡可放到Page的繼承類中去,再將本頁面繼承自該類#region 這裡可放到Page的繼承類中去,再將本頁面繼承自該類
protected override void Render(HtmlTextWriter writer)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
Response.Write("<script>onLoadOver();</script>");
base.Render (writer);
}
private void ShowBar(int waitTime)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
string strFileName = Path.Combine( Server.MapPath("./"), "HTMLPage1.htm" );
StreamReader sr = new StreamReader( strFileName, System.Text.Encoding.GetEncoding( "big5" ) );
string strHtml = sr.ReadToEnd();
Response.Write( strHtml );
sr.Close();
Response.Flush();
ThreadPool.QueueUserWorkItem(new WaitCallback(ThreadProc),waitTime);
}
private void ThreadProc(object waitTime)
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
try
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
string strScript = "<script>setPgb('pgbMain','{0}');</script>";
for ( int i = 0; i <= 99; i++ )
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
System.Threading.Thread.Sleep((int)waitTime);//
Response.Write( string.Format( strScript, i ) );
Response.Flush();
}
this.RegisterStartupScript("bb","<script>onLoadOver();</script>");
Response.Flush();
}
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
catch
{}
}
#endregion
重点在于ShowBar(100);,只要这里的100跟踞页面估计的加载时间适当调整就可以保证状态与数据同步了