How to show page loading div until the page has finished loading

Question

0.00/5 (No votes)

See more:

Hi All,

How to show Page Loading div until the page has finished loading in asp.net.

Please suggest

What I have tried:

I tried using update progress but it is not working.

Posted 5-May-16 22:38pm

Baroor

Updated 5-May-16 23:13pm

Add a Solution

2 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 · 2016-05-05T23:01:00

Show a "loading" div and use jQuery to hide the div on the document.ready event. Note it depends what you mean by "finished loading". The first task is that your code-behind runs and generates html, that html is sent to the browser and shown, the browser then loads the resources needed for that page such as images, scripts etc. As the browser hasn't been sent anything while your code-behind is running there is nothing you can do for that aspect of things, the loading div will only be shown after your code-behind and will then be hidden when all the images etc have loaded.

If it is your code-behind that is slow then you'll need to load the main content of your page using ajax so that you have a basic "loading" page returned quickly and the akax call loads the real content which takes time, and hides the loading div after.

Raje_ · Answer 2 · 2016-05-05T23:13:00

You can create a class and then use fadeout method of jquery :
CSS :

CSS

.loader {
            position: fixed;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 9999;
            background: url('/yourimagefolder/loading.gif') 50% 50% no-repeat rgb(249,249,249);
        }

html div :

HTML

<div class="loader"></div>

Jquery :

JavaScript

$(window).load(function () {
            $(".loader").fadeOut("slow");
        });

How to show page loading div until the page has finished loading

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0