0

我有一个网页，其中一个按钮用于检索大量数据。

我需要在按钮单击操作正在进行时显示进度条图像。

在单击按钮时，我正在下载数据，我处于无法使用更新面板和进度条 asp 控件的情况。

我尝试过使用 jquery 和 Css。它在单击按钮时显示图像，但在单击事件完成后不会消失。

html:

<asp:LinkButton ID="btnGenReport" runat="server" CssClass="button" Text="Generate" OnClick="btnGenReport_Click" OnClientClick="ProgressBar()"></asp:LinkButton>

CSS：

<style type="text/css">
    .modal
    {
        position: fixed;
        top: 0;
        left: 0;
        background-color: black;
        z-index: 99;
        opacity: 0.8;
        filter: alpha(opacity=80);
        -moz-opacity: 0.8;
        min-height: 100%;
        width: 100%;
    }
    .loading
    {
        font-family: Arial;
        font-size: 10pt;
        display: none;
        position: fixed;
        background-color: White;
        z-index: 999;
    }
</style>

查询：

<script type="text/javascript">
    function ProgressBar(){
        ShowProgress(function(){
            HideProgress();
        });
    }

    function ShowProgress(callback) {
        setTimeout(function () {
            var loading = $(".loading");
            loading.show();
            var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
            var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0) + 93;
            loading.css({ top: top, left: left });
        }, 200);

        callback();
    }

    function HideProgress(){
        var loading = $(".loading");
        loading.css("display","none");
    }
</script>

请帮助获取进度条......

提前致谢.....

4

1 回答 1

0

设置超时是异步的。因此，在您的 ShowProgress 函数中，首先要做的是 HideProgress，然后在 200 毫秒后显示进度条。

编辑 ：

function myFunction()
{
    setTimeout(function(){alert("Hello")},3000);
    alert("foo");
}

自己试试吧！

我假设您正在使用计时器来模拟服务器的工作。当您使用 ajax 将数据发送到您的服务器时，您将能够使用将在执行 ajax 调用之后调用的专用回调函数。

因此，或者您直接使用 ajax 进行尝试，您必须找到其他解决方案来模拟延迟。

于 2013-06-04T12:41:02.440 回答