Displaying a PageLoad Image in a page using JavaScript or Jquery

Question

0.00/5 (No votes)

See more:

Hi

i just created a login page and one redirecting page after the login successfully done to redirect to that specific page. during this redirection process i like to have a pageload image with some content to it, i like to display this pageload image untile the page gets completely loaded. Do i need to create a separate aspx page which contains the pageload image and content to it. and can i call this aspx page during the page get loading period. i dont want to make my actual page to sleep for displaying this Load image page. i want this load image page only when ever a page takes time to load its entire page.
Is their any solution using javascript or jquery.

So please help me for this issue
Thank you.

Posted 9-Oct-13 21:47pm

Anil Kumar Ch

Add a Solution

1 solution

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)

Zafar Sultan · Accepted Answer · 2013-10-09T21:53:00

Solution 1

This[^] seems to be what you are looking for.

Posted 9-Oct-13 21:53pm

Zafar Sultan

Comments

Anil Kumar Ch 10-Oct-13 6:36am

Hi Zafar Thanks for your valuable answer
This looks good but in the jquery code we can find .delay(350).fadeout();
it looks like he is possing for some period of time for displaying the image loader. i want to have a image loader without mentioning any delay of tiem manually by us, imahe loader need to be displayed when there is a delay of displaying the actual page only

Anil Kumar Ch 10-Oct-13 8:56am

The link which u mention i tried with that jquery code in css i changed the image name and mentioned my image but it is not working can i know the reason ..?

Zafar Sultan 10-Oct-13 9:05am

Have you followed all the instructions? Just make sure the image path is correct, the script is included just before the closing of body tag, and the preloader's HTML is included just after the start of the body tag. That's it to make it work. Yes, Jquery file is required at the top and valid doctype.

Anil Kumar Ch 10-Oct-13 9:37am

Im getting it the image is there any possiblity of adding another image bottom to it...?

Anil Kumar Ch 10-Oct-13 9:39am

Thanks ..:-) Zafar

Anil Kumar Ch 10-Oct-13 15:55pm

@ Zafar Sultan : Can u help me in small issue
I am not able to understand how to add these code of lines in my aspx page b'coz in my aspx page im not able understand where to add these line of code in my aspx page

Zafar Sultan 10-Oct-13 23:41pm

If you follow all the instructions given on the plugin's page you will make it work perfectly. All you have to do is include JQuery and CSS file in your header section, add loader div just after <body> and the script that triggers the plugin just before </body>. Regarding adding another image, you will have to play with the CSS and JS of the plugin, to make it work.

Anil Kumar Ch 11-Oct-13 1:33am

Ya i seen all the mentioned steps which are given in that they mentioned to place the css in head script in the body . the issue is im aspx page it looks like this

<%@ Page language="c#" Codebehind="..." AutoEventWireup="True" Inherits="...." %>
<%@ Register TagPrefix=".." Namespace=".." Assembly=".." %>

<div class="ContentPane">

</div>

This is how my aspx page looks so where do i need to place the specifed code lines in this kind of aspx page as im new to this so not able to do it so please kindly help me out with this issue ZAFAR. Just tell me where to place those code os lines in this aspx page .

Zafar Sultan 11-Oct-13 1:49am

Where are the body and head tags? Are you using master page?

Anil Kumar Ch 11-Oct-13 1:57am

No I'm not using any Master Page the page looks i posted in my reply .
Can mention head and body im my page ..?

Anil Kumar Ch 11-Oct-13 2:01am

When i seen my aspx page i was shocked where these head and body tags went so i strucked at this place Zafar :-(

Zafar Sultan 11-Oct-13 2:01am

Obviously. Do one thing. Add a new page and use the plugin on that page. If it works(i am sure it will), replace the contents of your original page with the contents of new page.

Anil Kumar Ch 11-Oct-13 2:09am

Ok I'll Do it
thansk alot Zafar

Anil Kumar Ch 11-Oct-13 5:10am

by adding a new page it is working but when im trying to add the content of my original page with my new content page it is not working