Wie zeige ich eine Lade-Animation beim ersten Laden an, während die Listenansicht auffüllt?

Question

Ich habe eine Seite mit einem iFrame (RadTabStrip mit MultiPageView), und was in diesen iframe geladen wird, ist eine andere Seite, die eine RadListView ist, die eine Weile dauert, um zu laden. Das gleiche gilt für andere Tabs/Iframes.

Ich möchte, dass ein animiertes gif angezeigt wird, während diese Listview gerendert wird. Ich habe ein paar Dinge ausprobiert, einschließlich des Ladefelds von Telerik Ajax, aber es scheint, dass selbst das nicht angezeigt wird, bis die Liste fertig ist (es bleibt für 10 Sekunden leer, dann sehe ich das loader flash für einen Augenblick, dann ist die Liste oben).

Kann jemand eine Lösung anbieten oder mir helfen zu verstehen, warum die Seite nichts lädt, bis die Listview vollständig gerendert ist?

Die Seite wird angezeigt, während die Liste geladen wird. Die Anzeige „Laden“ des Browsers dreht sich nicht, weil diese Seite „Rahmen“ ist voll geladen, nur nicht die iframe Inhalt:

Und dann diese erscheint nur auf, wenn seine voll geladen:

Answer 1

Ich würde versuchen, die UpdateProgress Kontrolle verwenden. Ich weiß nicht, ob die iframes es auswirken wird, aber so etwas wie dies sollten Sie in die richtige Richtung:

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

Hier sind die Stile, die Sie Opazität anpassen können je nach Bedarf:

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