locked
Showing Animation During a Long Page Load RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User1478076789 posted

    Hi there, I have a page that takes a long time to load because it utilizing multiple user controls. Is there a way where I can display a wait animation during the page loading utilizing JQuery? I'm a newbie to Jquery and client side development so any help is deeply apprecitive. Embarassed

    Thanks.

    Sunday, July 18, 2010 10:52 PM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-512064933 posted
    <div style="text-align: center; vertical-align: middle; font-family: Verdana; color: Blue; ; top: 50%; left: 50%; margin-left: -88px; font-size: small;" id="dvProgress" runat="server">  
Please Wait ...<img src="images/load.gif" style="vertical-align: middle" alt="Processing" /></div>  


    $(document).ready(function() 
{  
     $("div[id$=dvProgress]").fadeOut("fast");
}


    By default your divProgress will be visible and as soon as the Page gets ready, jquery will simply hide it


    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 22, 2010 2:17 AM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User1224194097 posted

    A Simple solution will be this one:

    include a div with some message please wait and an image.

        <div style="text-align: center; vertical-align: middle; font-family: Verdana; color: Blue;
        ; top: 50%; left: 50%; margin-left: -88px; font-size: small;"
        id="dvProgress" runat="server">
        Please Wait ...<img src="images/load.gif" style="vertical-align: middle" alt="Processing" />
    </div>

    and add onload event for body to hide the div after loading the page

    <body onload="dvProgress.style.display = 'none';">

    Sunday, July 18, 2010 11:11 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User1478076789 posted

    hi there, thanks for the quick response. Smile I added this code, however, whats happening is that the animation is not displaying during the page load but rather after it. Frown In addition, the animation is also not disappearing once the page is rendered. What I need is for the animated image to display while the page is loading. For instance, when the user clicks on a link to go to this page,  I need the animated image is appear while the page is loading.


    Thanks!


    Sunday, July 18, 2010 11:30 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User1224194097 posted

    check these links:

    http://stackoverflow.com/questions/750358/with-jquery-how-can-i-implement-a-page-loading-animation
    http://www.aspcode.net/Ajax-loading-animation-with-JQuery-and-ASPNET.aspx


    Sunday, July 18, 2010 11:38 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User1478076789 posted

    Hi there, thanks for the links. Is there a way to do this on the initial page load w/o a response to a button click event?


    Thanks

    Monday, July 19, 2010 10:25 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-768391503 posted

    Problem is you are trying to show something with a page that is rendering. It is not possible for the browser to load just a chunk and than render the rest of the page.

    I would try to figure out what causes my page to render so slowly. Maybe it is bad mark-up.

    Eric


    Monday, July 19, 2010 3:57 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-519136805 posted

    try this way :

    http://www.codeproject.com/KB/ajax/fastjavascript.aspx

    This will give some idea to you ...

    HTH

    Thursday, July 22, 2010 12:31 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-512064933 posted
    <div style="text-align: center; vertical-align: middle; font-family: Verdana; color: Blue; ; top: 50%; left: 50%; margin-left: -88px; font-size: small;" id="dvProgress" runat="server">  
Please Wait ...<img src="images/load.gif" style="vertical-align: middle" alt="Processing" /></div>  


    $(document).ready(function() 
{  
     $("div[id$=dvProgress]").fadeOut("fast");
}


    By default your divProgress will be visible and as soon as the Page gets ready, jquery will simply hide it


    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 22, 2010 2:17 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-237187975 posted

    I think java script will not work in this case as java script only works when page is rendered to client. So try below code. 

    I found solution at blogershub. 

    protected void Page_Load(object sender,EventArgs e)
{
   string str= @"Loading...'";
   Response.Write(str);
   Response.Flush();
   //A long process is going on here
   System.Threading.Thread.Sleep(5000);
}

    You can replace "Loading..." with Image html. 

    Thursday, December 26, 2013 12:08 AM