看了
Richer
上传的关于
WEB
页面加载时显示的进度条,但加载的数据与进度条并没有同步,而是当数据状态完成后再加载数据的,因此对其改进了下,使加载的数据与进度条几乎同步了。
重点在于ShowBar(100);,只要这里的100跟踞页面估计的加载时间适当调整就可以保证状态与数据同步了
却点:加重服务器的重担
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 >
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的繼承類中去,再將本頁面繼承自該類 #region 這裡可放到Page的繼承類中去,再將本頁面繼承自該類
protected override void Render(HtmlTextWriter writer)
{
Response.Write("<script>onLoadOver();</script>");
base.Render (writer);
}
private void ShowBar(int waitTime)
{
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)
{
try
{
string strScript = "<script>setPgb('pgbMain','{0}');</script>";
for ( int i = 0; i <= 99; i++ )
{
System.Threading.Thread.Sleep((int)waitTime);//
Response.Write( string.Format( strScript, i ) );
Response.Flush();
}
this.RegisterStartupScript("bb","<script>onLoadOver();</script>");
Response.Flush();
}
catch{}
}
#endregion
{
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的繼承類中去,再將本頁面繼承自該類 #region 這裡可放到Page的繼承類中去,再將本頁面繼承自該類
protected override void Render(HtmlTextWriter writer)
{
Response.Write("<script>onLoadOver();</script>");
base.Render (writer);
}
private void ShowBar(int waitTime)
{
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)
{
try
{
string strScript = "<script>setPgb('pgbMain','{0}');</script>";
for ( int i = 0; i <= 99; i++ )
{
System.Threading.Thread.Sleep((int)waitTime);//
Response.Write( string.Format( strScript, i ) );
Response.Flush();
}
this.RegisterStartupScript("bb","<script>onLoadOver();</script>");
Response.Flush();
}
catch{}
}
#endregion
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的繼承類中去,再將本頁面繼承自該類 #region 這裡可放到Page的繼承類中去,再將本頁面繼承自該類
protected override void Render(HtmlTextWriter writer)
{
Response.Write("<script>onLoadOver();</script>");
base.Render (writer);
}
private void ShowBar(int waitTime)
{
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)
{
try
{
string strScript = "<script>setPgb('pgbMain','{0}');</script>";
for ( int i = 0; i <= 99; i++ )
{
System.Threading.Thread.Sleep((int)waitTime);//
Response.Write( string.Format( strScript, i ) );
Response.Flush();
}
this.RegisterStartupScript("bb","<script>onLoadOver();</script>");
Response.Flush();
}
catch{}
}
#endregion
{
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的繼承類中去,再將本頁面繼承自該類 #region 這裡可放到Page的繼承類中去,再將本頁面繼承自該類
protected override void Render(HtmlTextWriter writer)
{
Response.Write("<script>onLoadOver();</script>");
base.Render (writer);
}
private void ShowBar(int waitTime)
{
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)
{
try
{
string strScript = "<script>setPgb('pgbMain','{0}');</script>";
for ( int i = 0; i <= 99; i++ )
{
System.Threading.Thread.Sleep((int)waitTime);//
Response.Write( string.Format( strScript, i ) );
Response.Flush();
}
this.RegisterStartupScript("bb","<script>onLoadOver();</script>");
Response.Flush();
}
catch{}
}
#endregion
重点在于ShowBar(100);,只要这里的100跟踞页面估计的加载时间适当调整就可以保证状态与数据同步了
posted on 2005-03-08 03:30 冷风.net 阅读(1875) 评论(4) 编辑 收藏 收藏至365Key 所属分类: DONET
评论
这是我的个人理解,如果有异议,希望指出,谢谢。