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

I have a lenghty ASP.NET page load process.

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

Is there a way to display a loading gif while the ASP.NET page loads?

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

Obviously I can't use an image on the page itself, and when I fiirst load a "dummy page" with the "Loading..." picture, that page is discarded as soon as I redirect the user to the real page...

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

Any clue? Thanks

任何线索？谢谢

3 个解决方案

#1

You can use an UpdateProgress control for this, like this:

你可以使用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>  

Here are some styles you can use if you want it to be semi-transparent:

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

#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;
}

#2

Please see my similiar question "Please Wait" message using jQuery or AJAX?:

请使用jQuery或AJAX查看我类似的问题“Please Wait”消息？：

While the ASPX page loads, you will stay on the current page in the web browser. So when you know the new page is loading (i.e., when a button or link is pressed), simply show the "Loading" image and it will automatically disappear when the client is finished receiving the "new" page (whether it be an actual new page or the same page posted back).

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

Example code you can use to automatically show your loading image (contained in a div) when a submit button is clicked is the following:

单击提交按钮时，可用于自动显示加载图像（包含在div中）的示例代码如下：

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

Alternatively, you can use the UpdatePanel that comes in the Ajax Toolkit or in ASP.NET 4.0. It has a control called UpdateProgress that displays a loading image automatically.

或者，您可以使用Ajax Toolkit或ASP.NET 4.0中的UpdatePanel。它有一个名为UpdateProgress的控件，可以自动显示加载图像。

EDIT:

编辑：

I think you mean you want to show a "Loading" image before your first page is even loaded, in which case you should put your master page content wrapped around an UpdatePanel, use a progress loader control that automatically shows an image (both available in the Ajax Toolkit or ASP.NET 4.0), and load the substantial (non-master page) content of your page after your initial page load in the UpdatePanel.

我想你的意思是你想在你的第一个页面被加载之前显示一个“正在加载”的图像，在这种情况下你应该将你的母版页内容包裹在UpdatePanel周围，使用一个自动显示图像的进度加载器控件（两者都可用于Ajax Toolkit或ASP.NET 4.0），并在UpdatePanel中初始页面加载后加载页面的实质（非母版页）内容。

You can do this by putting the body of your content page inside a Panel, setting the panel's visibility to False, and then setting it to True after the page loads.

您可以通过将内容页面的主体放在Panel中，将面板的可见性设置为False，然后在页面加载后将其设置为True来完成此操作。

Markup for an UpdateProgress control is as follows. You would, of course, want to style it and position it in the right area.

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>

EDIT:

编辑：

If you don't want to use the UpdatePanel and UpdateProgress controls, then simply do the following:

如果您不想使用UpdatePanel和UpdateProgress控件，则只需执行以下操作：

1. Put your page content in a Panel called pnlContent and set the panel's visibility to False.
2. 将您的页面内容放在名为pnlContent的Panel中，并将面板的可见性设置为False。
3. Create an img and your loading image and put it in a separate Panel called pnlLoading with the visility set to True.
4. 创建一个img和您的加载图像，并将其放在一个名为pnlLoading的单独面板中，其中visility设置为True。

5. Put a client-side script that forces the page to reload as soon as it loads. Put this script inside pnlLoading. Update: Put the #3 code below in your ASPX page to create your panel and it will trigger a post back immediately.

   放置一个客户端脚本，强制页面在加载后立即重新加载。将此脚本放在pnlLoading中。更新：将下面的＃3代码放在ASPX页面中以创建面板，它将立即触发回发。

6. Add the following #4 code to your Page_Load.

   将以下＃4代码添加到Page_Load。

Code:

码：

For #3:

对于＃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>

For #4:

对于＃4：

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

That will cause a loading image to show while your actual page content is being loaded.

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

#3

I found the following solution works nicely between page navigations without affecting the current Ajaxification or site structure.

我发现以下解决方案在页面导航之间很好地工作，而不会影响当前的Ajaxification或站点结构。

Just drop the script in no-mans-land between the head end and body start tags on your Master page.

只需将脚本放在主页面上的head end和body start标记之间的no-mans-land中。

Thanks to Subin for this one.

感谢Subin这个。

http://subinsb.com/loading-bar-until-page-loads-completely-using-javascript

http://subinsb.com/loading-bar-until-page-loads-completely-using-javascript

<script>
subinsblogla=0;
setInterval(function(){
if(document.readyState!='complete'){
 document.documentElement.style.overflow="hidden";
 var subinsblog=document.createElement("div");
 subinsblog.id="subinsblogldiv";
 var polu=99*99*99999999*999999999;
 subinsblog.style.zIndex=polu;
 subinsblog.style.background="black url(https://lh4.googleusercontent.com/-4WVJgCO93zc/UgpU2Y60CjI/AAAAAAAAC8E/R3XujnTjz3Y/s474/initializing.png) 50% 50% no-repeat";
 subinsblog.style.backgroundPositionX="50%";
 subinsblog.style.backgroundPositionY="50%";
 subinsblog.style.position="absolute";
 subinsblog.style.right="0px";
 subinsblog.style.left="0px";
 subinsblog.style.top="0px";
 subinsblog.style.bottom="0px";
 if(subinsblogla==0){
  document.documentElement.appendChild(subinsblog);
  subinsblogla=1;
 }
}else if(document.getElementById('subinsblogldiv')!=null){
 document.getElementById('subinsblogldiv').style.display="none";
 document.documentElement.style.overflow="auto";
}
},1000);
</script>

He recommends you do not replace the variable names, because there might be an other variable like that and the code won't work. If you want to change the Loading Image just change the background URL in the variable subinsblog.style.background.

他建议你不要替换变量名，因为可能有其他变量，代码不起作用。如果要更改加载图像，只需更改变量subinsblog.style.background中的后台URL。