show loading image when the page is loading

Question

0.00/5 (No votes)

See more:

I want to show loading image while my page is loading after i click on the link to that page.My page is attached to a master page.
I have displayed the loading image on preinit event of page and hide it at the end of page load,but it doesnt display for normal pages and and for heavy pages for example which displays google maps etc.image gets displayed for a fraction of second and then hides.

C#

protected void Page_PreInit(object sender, EventArgs e)
   {
       try
       {

           ClientScript.RegisterStartupScript(this.GetType(),"Popupshow", "showMessage();", true);

       }
       catch (Exception ex)
       {
           throw ex;
       }
   }
protected void Page_Load(object sender, EventArgs e)
   {
    ClientScript.RegisterStartupScript(this.GetType(),"Popuphide", "hideMessage();", true);
   }

I want the load
ing image to get displayed from the moment i click on the link of that page until it loads completely.

Help Me.

Thanks in advance

Posted 8-May-15 19:08pm

PWAVEL

Updated 8-May-15 19:34pm

v3

Add a Solution

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

F-ES Sitecore · Answer 1 · 2015-05-11T02:36:00

You have to realise that RegisterStartupScript simply adds js to the html that is going to be sent to the client. That output isn't sent until all the html is ready, ie until all your server code has run. It isn't sent or executed right away. So if your page takes 5 seconds to create;

Browser asks for your page and waits for the output
Page_PreInit adds "showMessage" to the output (browser is still waiting, it has nothing to show)
Page_Onload adds "hideMessage()" to the output (browser is still waiting, it has nothing to show)
Page takes 5 seconds to create, adding all your controls etc to the output (browser is still waiting, it has nothing to show)
Page is finished and output sent to browser in one chunk
Browser gets output then executes showMessage then hideMessage right away.

The only thing you can show a "waiting" message for are resources loaded *after* the html, such as images or any data retrieved via ajax.

Member 11662410 · Answer 2 · 2015-05-08T20:02:00

Solution 1

protected void Page_Load(object sender, EventArgs e)
{

image.ImageUrl="Your Image Location";
}

thank you

Posted 8-May-15 20:02pm

Member 11662410

Lad Kunal · Answer 3 · 2015-05-11T01:17:00

Hi,

First of all you need to create one javascript method named "Popupshow"
Secondly create one DIV. Assume that div name is "LoadingDiv"
Third step you need to create another javascript method named "Popuphide"
After doing that please follow below code:

function Popupshow()
{
$("#LoadingDiv").html("Please wait....");
}

function Popuphide()
{
$("#LoadingDiv").html("");
}

Description: When your preinit is called at that time "Popupshow" function call and your loading image or any text starts displaying it. Once your code executing Page Load event and when "Popuphide" method called at that time you have to simply close that div or hide div and give nothing or display none for that.

Hope it will help to you...

Happy Coding...

show loading image when the page is loading

3 solutions

Solution 3

Solution 1

Solution 2

Add your solution here

Preview 0