Solved

Please wait.... message before the page load

Posted on 2003-11-05
6
750 Views
Last Modified: 2012-05-04
Does anyone know how to show a "please wait..." message until the page load was finished?

I have an image button on a page called 'Take Test'. But loading of test page takes some time. So I want to show "Please wait ...page loading" text above the image button.

Thanks in advance.
0
Comment
Question by:anandnerkar
6 Comments
 
LVL 6

Expert Comment

by:mattjp88
ID: 9691640
here is something I found from Google, it seems to do what you want. http://wsabstract.com/script/script2/preloadimage2.shtml

-Matt
0
 
LVL 5

Expert Comment

by:ho_alan
ID: 9691693
0
 
LVL 1

Author Comment

by:anandnerkar
ID: 9691765
Hey thanks for quick reply... but I dont want image preload code.

I have a page which has "Take test" image button. On click it starts to load a test i,e question pages. This page is very large so it takes time to download. So after button click I want to show 'Please wait....' text above the image button itself untill the question page load was finished.
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 23

Expert Comment

by:Saqib Khan
ID: 9691927
<html>

<head>
<title>Load Test</title>
<Script>
function kk() {
document.getElementById("s").style.visibility = "visible"
}
</Script>
</head>

<body topmargin="0" leftmargin="0" onLoad="kk()">
Loading...
<div id="s" style="visibility:hidden">
<p><img border="0" name="ss" src="img1.jpg" width="800" height="600"></p>
</div>

</body>

</html>
0
 
LVL 23

Expert Comment

by:Saqib Khan
ID: 9691933
so b/w the DIV tag is your Page Content.
And Customize your Loading.. message to anything you want.
0
 
LVL 10

Accepted Solution

by:
NetGroove earned 200 total points
ID: 9697033
Here is my proposal:

<html>
<head>
<title>Loading...</title>
<Script>
function showContent() {
  document.getElementById("wait").style.display = "none"
  document.getElementById("content").style.display = "block"
  window.document.title = "Content loaded.";
}
</Script>
</head>
<body  onLoad="setTimeout('showContent()',5000)">
<div id=wait><center>
<h1>Loading...</h1>
<img src="http://us.i1.yimg.com/us.yimg.com/i/mcookie/wait.gif">
</center></div>
<div id="content" style="display:none;">
<center>
<H1>Some content</h1>
</center>
</div>
</body>
</html>

It hides the wait div after loading.

Change for your production this demo from this:
<body  onLoad="setTimeout('showContent()',5000)">

To this:
<body  onLoad="showContent()">

The five seconds are only for the demo wait time.

Good luck,
NetGroove

0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
innerHTML 7 35
How to pass JavaScript generated HTML text form values to PHP? 5 39
removing a class in javascript 4 50
dynamic created check uncheck boxes 6 23
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question