C#.Net網頁加載等待效果漂亮並且簡單


最近網頁加載數據比較多,點擊后給用戶就是白板很不友好,想了很久找了些資料,在網頁加載中顯示等待畫面給客戶,頁面加載完成自動隱藏等待效果。

在網頁后台cs代碼:
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
                ShowLoanding();
                //.....
               //你的數據加載代碼
                Thread.Sleep(1000);//線程停留1秒,也可以不要。
        }
    }

    //顯示加載進度
    private void ShowLoanding()
    {
        Response.Write("<div style='position:absolute;z-index:600;width:expression(document.body.clientWidth);height:expression(document.body.clientHeight);background-color:#FFFFFF;text-align:center;padding-top:150px;' id='mydiv' >");
        Response.Write("<img src='http://www.kuwant.com/common/images/waiting.gif'>&nbsp;Loading...");
        Response.Write("</div>");
        Response.Write("<script language=javascript>;");
        Response.Write("function StartShowWait(){mydiv.style.visibility = 'visible'; ");
        Response.Write("window.setInterval('ShowWait()',1000);}");
        Response.Write("function HideWait(){mydiv.style.visibility = 'hidden';");
        Response.Write("window.clearInterval();}");
        Response.Write("StartShowWait();</script>");
        Response.Flush();
    }

在網頁aspx代碼<body>之后加入如下代碼:(目的隱藏等待效果)

<body style="margin: 0px; padding: 0px" >
<script type="text/javascript">
   HideWait();
</script>

等待效果就是在網頁中間出現一個等待提示和動畫,頁面加載完成自動消失。當然動畫圖像和提示文字自己可以在代碼中修改。

C.Net網頁加載等待效果漂亮並且簡單 - 空空兒 - Program  Management
 
轉:http://blog.163.com/da7_1@126/blog/static/1040726782011113063526313/


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM