如何在listview填充时在初始加载时显示加载动画？

Question

我有一个网页的iframe（RadTabStrip与MultiPageView），以及什么是加载到该iframe是另一页是一个RadListView需要一段时间来加载。其他选项卡/ iframe也是如此。

我要的是一个GIF动画显示，而列表视图中绘制。我已经尝试了一些东西，包括telerik ajax加载面板，但它看起来正在发生的是，即使不会显示，直到列表完成呈现（它将保持空白，像10秒钟，然后我会看到装载机闪光灯瞬间，然后列表中）。

有人可以提供一个解决方案，或者帮助我理解为什么页面拒绝，直到列表视图完全渲染加载什么？

页面显示该列表时加载。浏览器的“加载”指示灯不旋转，因为此页“框”满载，只是没有iframe的内容：

然后这只是弹出时其满载：

Answer 1

我会尝试使用UpdateProgress控制。我不知道I帧是否会影响它，但这样的事情应该指向你在正确的方向：

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