Как отобразить анимацию загрузки при начальной загрузке при заполнении списка?

Question

У меня есть страница с iFrame (RadTabStrip с MultiPageView), и то, что загружается в этот iframe, - это еще одна страница, представляющая собой RadListView, для загрузки которой требуется некоторое время.То же самое касается других вкладок / фреймов.

Я хочу, чтобы анимированный GIF отображался во время рендеринга этого списка.Я пробовал несколько вещей, в том числе панель загрузки telerik ajax, но кажется, что происходит то, что даже это не будет отображаться до тех пор, пока не закончится рендеринг списка (он останется пустым около 10 секунд, затем я посмотрюзагрузчик мигает на мгновение, затем список готов).

Может кто-нибудь предложить решение или помочь мне понять, почему страница отказывается загружать что-либо до тех пор, пока просмотр списка не будет полностью отображен?

Отображение страницыэто пока список загружается.Индикатор «загрузки» браузера не вращается, потому что этот «фрейм» страницы полностью загружен, а не содержимое iframe:

А затем он появляется только при полной загрузке:

Answer 1

Я бы попробовал использовать элемент управления UpdateProgress. Я не знаю, повлияет ли на это iframes, но что-то вроде этого должно указать вам правильное направление:

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