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 Toolkit或ASP.NET 4.0中的UpdatePanel。它有一个名为UpdateProgress的控件，可以自动显示加载图像。

修改

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

您可以将内容网页的正文放在UpdatePanel内，将面板的可见性设置为Panel，然后在页面加载后将其设置为False。< / p>
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的单独img中，其可见度设置为Panel。

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

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

<强>代码：

＃3：

pnlLoading

＃4：

Page_Load

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

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。

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

3 个答案: