Showing A Waiting Image While The Page.Load event does its stuff?

Question

I have a page that on page load exectutes a lot of methods.. A few ping off and grab some external pages and strip out content to display etc.. etc..

Problem is as this can take quite a few seconds, the page just sort of hangs while all this is going on in the background... I want to be able to display the page with an animated GIF saying 'Working' or something... And still in the background the methods in the page load are populating the GridView or whatever and when ready show the result? Any ideas? Do I have to use an Udate Panel or something?

Answer 1

Edit

I appologize, I totally misread the question. I was thinking you were talking about the load event on the document in the browser not the server side load event. My mistake.

My original answer is bellow:

If your html define a div which covers the area you want to hide. In it put your please wait message and icon.

At the very end of your page load set the div to display, none. This will hide the message showing the content behind it. You will probally want to absolutley position this div as well, It shouldn't be a parent to the content your hiding (Otherwise you'd hide the content when you set the div's display to none).

Answer 2

An asp.net ajax panel with updateprogress may give you what you desire, as during Page_load nothing has been sent to the browser at all.

Another alternative is to show a div overlay that is fired via javascript on the element causing the postback. When the page renders(after page_load and all that heavy processing) the div overlay would be gone. jQuery would be a good library to look at for this type of overlay.

Answer 3

Yeah I would let the page render, then stick something in the javascript to fire an AJAX event. During the AJAX call, show a waiting div. When it comes back, make the waiting div disappear. You can either do this manually, or using MS AJAX. IMO, the easiest way would be to use MS AJAX. Here's how I would try (off the top of my head):

<asp:UpdateProgress id="uprogMain" runat="server">
  <ProgressTemplate>
    <div style="position: absolute; left: 100px; top: 100px; z-index: 1000; background-color: White;">
      Put some stuff here!
    </div>
  </ProgressTemplate>
</asp:UpdateProgress>
<asp:LinkButton id="btnGetLotsOfStuff" />
<asp:UpdatePanel id="upMain" runat="server">
  <Triggers>
    <asp:AsyncPostbackTrigger ControlID="btnGetLotsOfStuff" />
  </Triggers>
  <ContentTemplate>
    <div id="divResults" runat="server">
      <!-- This is where your time-intensive methods put their returned data -->
    </div>
  </ContentTemplate>
</asp:UpdatePanel>

Put a <script> tag at the END of your HTML page that does this:

<script type="text/javascript" language="javascript">
__doPostBack('btnGetLotsOfStuff', '');
</script>