Question

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

我想在Page_Load函数的开头放置 show Progress bar function 。并在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>

Answer 1

另一种方法是给你的css上课。然后将div作为占位符放在您希望窗口显示的位置。给div一个id，并为它的css类指定你的类的id，并将display属性设置为none。然后当你准备好使用一点jquery来改变显示从none到say block。假设你做过像div id ='myWait'display ='none'class ='mycssclass' 然后jquery沿着线（'#myWait'）。attr（'display'，'block'）;

在Page_Load中显示和隐藏进度条

1 个答案: