如何在填充列表视图时在初始加载时显示加载动画？

Question

我有一个带有 iFrame 的页面（带有 MultiPageView 的 RadTabStrip），加载到该 iframe 中的是另一个需要一段时间才能加载的 RadListView 页面。其他选项卡/iframe 也是如此。

我想要的是在该列表视图呈现时显示动画 gif。我已经尝试了一些东西，包括telerik ajax加载面板，但似乎正在发生的是，即使在列表完成渲染之前也不会显示（它会保持空白10秒，然后我会看到loader 闪烁一会，然后列表就出来了）。

有人可以提供解决方案或帮助我理解为什么在列表视图完全呈现之前页面拒绝加载任何内容吗？

页面在加载列表时显示此内容。浏览器的“加载”指示器没有旋转，因为此页面“框架”已完全加载，而不是 iframe 内容：

然后它会在它完全加载时弹出：

Answer 1

我会尝试使用UpdateProgress 控件。我不知道 iframe 是否会影响它，但这样的事情应该为您指明正确的方向：

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