昨天看了Richer上传的关于WEB页面加载时显示的进度条，但加载的数据与进度条并没有同步，而是当数据状态完成后再加载数据的，因此对其改进了下，使加载的数据与进度条几乎同步了。
却点：加重服务器的重担
1。新建一下HTML页面来显示进度条
<script language="javascript">
function setPgb(pgbID, pgbValue)
{
var tab = document.getElementById( "tabShow" );
tab.style.cursor="wait";
if ( pgbValue <= 100 )
{
if (lblObj = document.getElementById(pgbID+'_label'))
{
lblObj.innerHTML = pgbValue + '%'; // change the label value
}
if ( pgbObj = document.getElementById(pgbID) )
{
var divChild = pgbObj.children[0];
pgbObj.children[0].style.width = pgbValue + "%";
}
window.status = "數據讀取" + pgbValue + "%請稍後
";
}
if ( pgbValue == 100 )
window.status = "數據讀取已經完成.";
}
function onLoadOver()
{
var tab = document.getElementById( "tabShow" );
tab.style.display = "none";
tab.style.cursor="auto";
window.status = "數據讀取已經完成.";
}
</script>
<style>
.bi-loading-status { PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; OVERFLOW: hidden; WIDTH: 150px; PADDING-TOP: 1px }
.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 }
.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 }
.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)
{
ShowBar(100); ///在頁面加載開始時就顯示進度條;100為估計的頁面延時間，可跟踞頁面加載時間適當調整
//以下為測試數據
for(int i=0;i<1000000;i++)
{
for(int j=0;j<10000;j++){}
}
DataSet ds = new DataSet();
ds.ReadXml(Server.MapPath("./Tmp.xml"));
DataGrid1.DataSource = ds.Tables["Users"];
DataGrid1.DataBind();
}
這裡可放到Page的繼承類中去，再將本頁面繼承自該類
重点在于ShowBar(100);，只要这里的100跟踞页面估计的加载时间适当调整就可以保证状态与数据同步了
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。