再看WEB页面进度条！

看了 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的繼承類中去，再將本頁面繼承自該類 #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跟踞页面估计的加载时间适当调整就可以保证状态与数据同步了

posted on 2005-03-08 03:30 冷风.net 阅读(1875) 评论(4)  编辑 收藏 收藏至365Key 所属分类: DONET

评论   

很不错的一个想法，不过这个进度条有个缺点，他是在postback后才显示的，但是通常传送大数据量的post request的时候，我们等待的是post的那段时间而非处理的时间。
这是我的个人理解，如果有异议，希望指出，谢谢。