locked
Page loading and Ajax Control Toolkit RRS feed

  • 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