Need to show loading image in Page load event

Question

5.00/5 (1 vote)

See more:

Hi All,

I wanted to show loading image while page loading. because of page load is taking time since page having third party controls.

Posted 15-Feb-12 2:19am

SRPravin

Add a Solution

4 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

fixthebugg · Answer 1 · 2012-02-15T06:45:00

Solution 2

if you are using the ajax , you can also use update progress control.

http://ajax.net-tutorials.com/controls/updateprogress-control/

Posted 15-Feb-12 6:45am

fixthebugg

SRPravin · Answer 2 · 2012-02-15T18:53:00

Hello Kushwant,

I'm using modalpopupextender in previous page and a button btnContinue to redirect the url. I have written a code like this:
in Javascript:
<pre lang="Javascript">
function pageLoad() {
$find('ctl00_GFSTMSContentPlaceHolder1_ModalProgress').hide();
}
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(
function(sender, e) {
if (e.get_postBackElement().id == "ctl00_GFSTMSContentPlaceHolder1_btnContinue") // This line can make sure only the request from GridView1 will present popup panel, you can change it to other control client id.
{
$find('ctl00_GFSTMSContentPlaceHolder1_ModalProgress').show();
}
});
</pre>
and in Asp:content (using asp:content because its a child page)
<pre lang="HTML">
<asp:Panel ID="panelUpdateProgress" runat="server">
<asp:UpdateProgress ID="UpdateProg1" DisplayAfter="10" runat="server">
<ProgressTemplate>
<img src="../../Images/progress.gif" style="vertical-align: middle" alt="Processing" />
</ProgressTemplate>
</asp:UpdateProgress>
</asp:Panel>
<asp:ModalPopupExtender ID="ModalProgress" runat="server" TargetControlID="panelUpdateProgress"
BackgroundCssClass="modalBackground" PopupControlID="panelUpdateProgress">
</asp:ModalPopupExtender>
</pre>
This will work for me in previous page but the problem is, when it redirect to another page lets say "Index.aspx", while loading this index page loading image will get stuck till page is loaded.

Michael dg · Answer 3 · 2012-02-15T03:52:00

The best way is to use an another html let say index.html with refresh tag that points to your long loading page. This way the loading of the load page are hidden in index.html.

XML

<html>
<head>
    <meta http-equiv="refresh" content="2;url=/PutYourLongLoadingPageHe.aspx">
    <title>Sample Title</title>
</head>
<body>
    <div>
        <img scr="wait.gif"</> Please wait while loading the page
    </div>
</body>
</html>

fixthebugg · Answer 4 · 2012-02-16T02:40:00

If I am getting you correctly then you can use the display after property of update progress. By default, the UpdateProgress control is displayed a half-second after the partial-page
update starts. You can set the DisplayAfter property to the number of milliseconds to wait before displaying the UpdateProgress content.

Need to show loading image in Page load event

4 solutions

Solution 2

Solution 3

Solution 1

Solution 4

Add your solution here

Preview 0

Need to show loading image in Page load event

4 solutions

Solution 2

Solution 3

Solution 1

Solution 4

Add your solution here

Preview 0

Existing Members

...or Join us