显示和隐藏进度条在Page_Load

Show and Hide Progress Bar in Page_Load

本文关键字：Page Load 隐藏 显示      更新时间：2023-09-26

我在ASP.NET中实现了一些网页。我想给我的页面添加一个进度条。因为页面需要几分钟才能加载。

我想把显示进度条函数在Page_Load函数的开始。并将其隐藏在Page_Load函数的末尾。我该如何实现呢?

请给我一些建议。提前谢谢你。

<%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <style type="text/css">
        #loading
        {
            font-family: Arial;
            font-size: 10pt;
            border: 5px solid #67CFF5;
            width: 220px;
            height: 20px;
            display: none;
            position: fixed;
            background-color: White;
            z-index: 999;
            text-align: center;
            line-height: 20px;
        }
    </style>
    <script type="text/javascript">
        function ToggleProgressBar() {
            var loading = window.jQuery('#loading');
            if (loading.is(':visible')) {
                loading.hide();
            }
            else {
                var top = Math.max(parseInt($(window).height() / 2 - loading.height() / 2), 0);
                var left = Math.max(parseInt($(window).width() / 2 - loading.width() / 2), 0);
                loading.css({ top: top, left: left });
                loading.show();
            }
        }
        function blahblah(s, e) {
            // some blah blah function contents
        }
        function blahblah2(s, e) {
            // some blah blah function contents
        }
    </script>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            **// TODO: Show Progress Bar**
            DelayTime(); // dummy function to delay page load
            **// TODO: Hide Progress Bar**
        }
        protected void DelayTime()
        {
            txt_delay.InnerText = "";
            for (int i = 0; i < 3000; i++)
            {
                txt_delay.InnerHtml += i.ToString("0000") + ", ";
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <span id="txt_delay" runat="server"></span>
        <div id="loading" align="center" runat="server">
            Loading...
            <%--<img src="/Images/progress-indicator.gif" alt="" />--%>
        </div>      
    </div>
    </form>
</body>
</html>

另一种方法是给css一个类。然后在希望显示窗口的位置放置一个div作为占位符。给div一个id，并给它的css类指定你的类的id，并将display属性设置为none。然后，当您准备好时，使用一点jquery将显示从none更改为say block。假设您已经做了如下操作:div id='myWait' display='none' class='mycssclass'然后jquery ('#myWait').attr('display'，'block');

相关文章：