在 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

请看我的类似问题"Please Wait" message using jQuery or AJAX?：

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

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

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

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

编辑：

我认为您的意思是您希望在加载第一页之前显示“正在加载”图像，在这种情况下，您应该将母版页内容包裹在 UpdatePanel 周围，使用进度加载器控件自动显示图片（在 Ajax Toolkit 或 ASP.NET 4.0 中都可用），并在UpdatePanel 中加载初始页面之后加载页面的大量（非母版页）内容。

您可以通过将内容页面的正文放在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. 将您的页面内容放在名为pnlContent 的Panel 中，并将面板的可见性设置为False。
2. 创建一个img 和您的加载图像，并将其放在名为pnlLoading 的单独Panel 中，并将可见性设置为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;
}

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

Answer 3

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

只需将脚本放在母版页上的 头端和正文开始标记之间。

感谢 Subin 的这个。

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>

他建议您不要替换变量名，因为可能还有其他类似的变量，代码将无法正常工作。 如果要更改加载图像，只需更改变量 subinsblog.style.background 中的背景 URL。