写一个Loading Page 制作方法给新手做为参考

由于工作忙,好久没上CSDN 了,现在贴一个  Loading Page 制作方法给新手做为参考(PageProcessor.aspx为Loading Page页面, Default.aspx 为用户最终的页面)PageProcessor.aspx页面源码:<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PageProcessor.aspx.cs" Inherits="PageProcessor" %><!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">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        var iLoopCounter = 1;
        var iMaxLoop = 6;
        var iIntervalId;
        function BeginPageLoad() {
            location.href = "<%=PageToLoad%>";
            iIntervalId = window.setInterval("iLoopCounter=UpdateProgressMeter(iLoopCounter,iMaxLoop);",500);
        }        function UpdateProgressMeter(iCurrentLoopCounter, iMaximumloops) {
            var progressMeter = document.getElementById("ProgressMeter")
            iCurrentLoopCounter += 1;
            if (iCurrentLoopCounter <= iMaximumloops) {
                progressMeter.innerText += ".";
                return iCurrentLoopCounter;
            }
            else {
                ProgressMeter.innerText = "";
                return 1;
            }        }        function EndPageLoad() {
            window.clearInterval(iIntervalId);
            var progressMeter = document.getElementById("ProgressMeter")
            progressMeter.innerText = " Page Loaded - Now Transferring ";
        }
        
    </script>    
   
</head>
<body onload="BeginPageLoad();" onunload="EndPageLoad();">
    <form id="form1" runat="server">
    <div>
        <table border ="0" width="99%">
            <tr>
                <td>
                    <span id="MessageText" > Loading Page - Please Wait </span>
                    <span id="ProgressMeter"></span>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>PageProcessor.cs 源码:  using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;public partial class PageProcessor : System.Web.UI.Page
{
    protected  string PageToLoad;    protected void Page_Load(object sender, EventArgs e)
    {
        PageToLoad = Request.QueryString["Page"];
    }
}Default.aspx 页面内容如下: <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %><!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">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      该页面为用户最终的显示页面
    </div>
    </form>
</body>
</html>
Default.cs源码如下:  using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(5000); //睡眠5秒
    }
}运行后在ie 上输入:
  http://localhost:1453/WebSite24/pageprocessor.aspx?page=Default.aspx
关键是 : pageprocessor.aspx?page=Default.aspx结果是:
页面先显示pageprocessor.aspx,进度条在动,5秒后自动进入Default.aspx 

解决方案 »

  1.   

    Loading Page 页面主要的思路是:访问一个首页须有时要很长的时间去等时,就在这时如果先显示一句话告诉客户在正在加载首页,等主页加载完所有内容后再把主页显示出来,这样做会比较友好.这只是一种思路而已.Loading Page还有更多的做法.把上面的代码保存下来,再加一个login.aspx 页面,
    login.cs 源码如下:using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;public partial class Login : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {    }
        protected void Button1_Click(object sender, EventArgs e)
        {
            Response.Redirect("PageProcessor.aspx?Page=Default.aspx");
        }
    }运行 login.aspx 页面,点击 button1 就可以看到效果