在asp.net页面加载时显示gif

Question

我有一个长度的ASP.NET页面加载过程.

有没有办法在ASP.NET页面加载时显示加载gif？

显然我不能在页面本身上使用图像,当我第一次使用"正在加载..."图片加载"虚拟页面"时,一旦我将用户重定向到真实页面,该页面就会被丢弃. .

任何线索？谢谢

Answer 1

您可以使用UpdateProgress控件,如下所示:

<asp:UpdateProgress ID="prgLoadingStatus" runat="server" DynamicLayout="true">
    <ProgressTemplate>
        <div id="overlay">
            <div id="modalprogress">
                <div id="theprogress">
                    <asp:Image ID="imgWaitIcon" runat="server" ImageAlign="AbsMiddle" ImageUrl="/images/wait.gif" />
                    Please wait...
                </div>
            </div>
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>  

如果您希望它是半透明的,可以使用以下一些样式:

#overlay {
    position: fixed;
    z-index: 99;
    top: 0px;
    left: 0px;
    background-color: #f8f8f8;
    width: 100%;
    height: 100%;
    filter: Alpha(Opacity=90);
    opacity: 0.9;
    -moz-opacity: 0.9;
}            
#theprogress {
    background-color: #fff;
    border:1px solid #ccc;
    padding:10px;
    width: 300px;
    height: 30px;
    line-height:30px;
    text-align: center;
    filter: Alpha(Opacity=100);
    opacity: 1;
    -moz-opacity: 1;
}
#modalprogress {
    position: absolute;
    top: 40%;
    left: 50%;
    margin: -11px 0 0 -150px;
    color: #990000;
    font-weight:bold;
    font-size:14px;
}

Answer 2

请使用jQuery或AJAX查看我类似的问题"Please Wait"消息？:

加载ASPX页面时,您将保留在Web浏览器中的当前页面上.因此,当您知道新页面正在加载时(即按下按钮或链接时),只需显示"正在加载"图像,当客户端完成接收"新"页面时它将自动消失(无论是否为实际页面)新页面或同一页面回发).

div单击提交按钮时,可用于自动显示加载图像(包含在a中)的示例代码如下:

$(':submit').click(function() {
    $('#divLoading').show();
});

或者,您可以使用UpdatePanelAjax Toolkit或ASP.NET 4.0中的.它有一个控件UpdateProgress,可以自动显示加载图像.

编辑:

我认为你的意思是你要在你的第一个页面被加载之前显示一个"正在加载"的图像,在这种情况下你应该把你的母版页内容包裹起来UpdatePanel,使用一个自动显示图像的进度加载器控件(两者都可以在Ajax Toolkit或ASP.NET 4.0),并在初始页面加载后加载页面的实质(非主页面)内容UpdatePanel.

您可以将内容页面的主体放在a中Panel,将面板的可见性False设置为,然后True在页面加载后将其设置为.

UpdateProgress控件的标记如下.当然,您会想要设计它并将其放置在正确的区域.

<asp:UpdateProgress ID="upgLoad" DynamicLayout="true" runat="server">
    <ProgressTemplate>
        <div id="theprogress">
            <img src="images/loading.gif" />
            <span>Loading</span>
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

编辑:

如果您不想使用UpdatePanel和UpdateProgress控件,那么只需执行以下操作:

1. 将您的页面内容置于Panel被调用状态pnlContent并将面板的可见性设置为False.
2. 创建一个img和您的加载图像,并将其放在一个单独的Panel被调用pnlLoading设置为True.

3. 放置一个客户端脚本,强制页面在加载后立即重新加载.把这个脚本放在里面pnlLoading.更新:将下面的#3代码放在ASPX页面中以创建面板,它将立即触发回发.

4. 将以下#4代码添加到您的Page_Load.

码:

对于#3:

<asp:Panel runat="server" ID="pnlLoading">
    <!-- Replace "form1" with your form's name. -->
    <script type="text/javascript">form1.submit()</script>
    <img src="images/loading.gif" alt="Loading" />
    <span>Loading</span>
</asp:Panel>

对于#4:

if (Page.IsPostBack())
{
    pnlLoading.Visible = false;
    pnlContent.Visible = true;
}

这将导致在加载实际页面内容时显示加载图像.