Answered by:
Page loading and Ajax Control Toolkit

Question
-
User-2139489267 posted
Hi everyone,
i searched on google for page loading effect like google and i got some examples. But all the examples show the same stuff. In the button press event it shows label or gif by using thread and it works only by user interaction.
how can we achieve same effect like google(Gmail and orkut) ? According to me it loads whole page after rendering of all the controls and graphics and only after that page is visible. Till then it shows blank white page and loading.. at the top left corner.
i read somewhere that we can load another blank page first to show loading effect and then the main page. is it possible to achieve same effect using Ajax control toolkit? i am new to this things..i've used only autocomplete extender and it works fine.
Please throw some lights on this.
Regards,
Nil
Monday, June 16, 2008 10:01 AM
Answers
-
User1735976268 posted
Sorry, bit of a hasty first post there. That will work great for delayed loading of user controls. If what you want to do though is hide your page content until its all loaded then try the method found here: http://www.dwfaq.com/tutorials/Layers/hide_wLoading1.asp
The example is done in Dreamweaver, but the concept is the same in VS.
...............................................
Okay, so I've been screwing around with this for almost an hour now and I still don't think it is going to be your ticket. Here's my code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> <script type="text/javascript"> window.onload = function() { document.getElementById("loader").style.visibility = "hidden"; document.getElementById("loader").style.display = "none"; } </script> <style> body,html { margin:0; ; height: 100%; } div#loader { ; top: 0; right: 0; bottom: 0; left: 0; background-color: #FFF; visibility: visible; display: block; } </style> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <div id="loader"> <img src="Images/ajax-loader.gif" alt="" />Loading... </div> <div id="wrapper"> </div> </div> </form> </body> </html>
I unfortunately have to move on to doing some 'real' work here or I'll get fired :)
Good luck!
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Monday, June 16, 2008 10:56 AM
All replies
-
User1735976268 posted
Check out this page on CodeProject: http://www.codeproject.com/KB/ajax/DelayedContentLoading.aspx
Monday, June 16, 2008 10:09 AM -
User-1776072412 posted
You will also want to make use of the UpdateProgress control:
http://www.asp.net/AJAX/Documentation/Live/overview/UpdateProgressOverview.aspx
Monday, June 16, 2008 10:11 AM -
User1735976268 posted
Sorry, bit of a hasty first post there. That will work great for delayed loading of user controls. If what you want to do though is hide your page content until its all loaded then try the method found here: http://www.dwfaq.com/tutorials/Layers/hide_wLoading1.asp
The example is done in Dreamweaver, but the concept is the same in VS.
...............................................
Okay, so I've been screwing around with this for almost an hour now and I still don't think it is going to be your ticket. Here's my code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> <script type="text/javascript"> window.onload = function() { document.getElementById("loader").style.visibility = "hidden"; document.getElementById("loader").style.display = "none"; } </script> <style> body,html { margin:0; ; height: 100%; } div#loader { ; top: 0; right: 0; bottom: 0; left: 0; background-color: #FFF; visibility: visible; display: block; } </style> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <div id="loader"> <img src="Images/ajax-loader.gif" alt="" />Loading... </div> <div id="wrapper"> </div> </div> </form> </body> </html>
I unfortunately have to move on to doing some 'real' work here or I'll get fired :)
Good luck!
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Monday, June 16, 2008 10:56 AM -
User-2139489267 posted
point here i wanted to make was that i want the same effect like google(gmail,orkut) that shows loading..when the page load first time..
Thanks you all..let me check out and go through what you provided me..i'll let you know very soon about the result whether this is what i wanted or not..
Tuesday, June 17, 2008 1:14 AM -
User-2139489267 posted
sorry in bit hurry i posted my first message so it doesn't clear what i want..
i've some doubts regarding Loading effect of google(Gmail, Orkut ):
Is that loading effect display before page load, i mean whether it loads the page after rendering of all the controls and graphics and till then it shows that Loading effect on top left corner..
if answer is yes then how can it be achieved? using web service? and how can we know the exact time that page is rendered completely..
or are they making fool people and loading page late to show that animated gif ?[;)]
and can it be achieved using Ajax control toolkit? and i tried the code you gave me..it's not working like google(gmail, orkut ) effect..
Thanks & Regards,
Nil
Tuesday, June 17, 2008 10:02 AM