在 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 的“请稍候”消息？：

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

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

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

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

编辑：

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

为此，您可以将内容页面的正文放入 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. 将页面内容放入 < code>Panel 调用 pnlContent 并将面板的可见性设置为 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 或站点结构。

只需将脚本放在母版页上的头部结束标记和正文开始标记之间的无人地带即可​​。

感谢苏斌的这一期。

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。