Demo:
This approach is suitable if your request delays due to content downloading, such as images and other body content. Page response time cannot be predicted. For the first page load it gets all the data while subsequent responses get cached data. So if you provide constant delay on progress users may lose the joy or browser cache and improved performance by modern browsers. On the other hand, if your request gets delayed by execution of the page such as database calls, web service calls etc, you may consider handing long running operations.
- Simple example - only strat message and end message
- Detailed example - including progress bar and step processing results
- At the end of the page, we have the JavaScript to hide the progress bar.
- However, if you hide the progress bar immediately, user still notify a blank space.
- So if you certain that page loading take a while about 2-4 seconds it is better you delay the hide statement at the end of the page.
setTimeout("document.getElementById('progress').style.display = 'none'", 5000); Example: <%@ Page Language="C#" %> <html> <head runat="server"> <style type="text/css"> div.DialogueBackground { position:absolute; width:100%; height:100%; top:0; left:0; text-align:center; } div.DialogueBackground div.Dialogue { width:300px; height:100px; position:absolute; left:50%; top:50%; margin-left:-150px; margin-top:-50px; border:solid 10px #555; background-color:#fff; } div.DialogueBackground div.Dialogue p { padding:20px 10px; } </style> <script runat="server"> protected override void OnLoad(EventArgs e) { base.OnLoad(e); /// /// one MB size of request and resposne. /// for (int i = 0; i < 1000; i++) { Image img = new Image() { ImageUrl = "SomeImage" + i + ".png" }; img.Attributes.Add("style", "display:none"); this.phContent.Controls.Add(img); } } </script> </head> <body> <form id="form1" runat="server"> <div class="DialogueBackground" id="progress"> <div class="Dialogue"> <p>Please wait...</p> <img src="::root/::images/Progress.gif" alt="Processing" /> </div> </div> <asp:Button runat="server" ID="btnSave" Text="Save" OnClientClick="javascript:document.getElementById('progress').style.display = 'block'" /> <asp:PlaceHolder runat="server" ID="phContent" /> </form> <script language="javascript" type="text/javascript"> setTimeout("document.getElementById('progress').style.display = 'none'", 5000); </script> </body> </html>
No comments:
Post a Comment