Introduction
Ever wish you could replace that unsightly grey box displayed while your
Java applet is loading with a message to the user?
The following code provides a solution for IE
and Netscape. A more complete description follows the code.
<html>
<head>
<title>Your Title Here</title>
</head>
<script language="JavaScript">
<!-- Hide script from old browsers
function init()
{
if (document.all)
{
document.all.loading.style.visibility="hidden";
document.all.myapplet.style.visibility="visible";
document.applets[0].repaint();
}
else
{
document.loading.visibility="hide";
document.myapplet.visibility="visible";
}
}
</script>
<style type="text/css">
#loading {
position:absolute;
left:150;
top:200;
}
#myapplet {
position:absolute;
left:10;
top:10;
visibility:hide;
}
</style>
<body onLoad="init()">
<div id="loading">
<p>Please wait while Java applet loads...</p>
</div>
<div id="myapplet" style="visibility:hidden">
<applet archive="app1.jar" code="app1.class" align="baseline" width="620" height="442">
<p>Requires a browser that supports Java.</p>
</applet>
</div>
</body>
</html>
The Solution Explained
First, let's explain exactly what we're trying to do here. We want a message, such as
"Please wait while Java applet loads..." to be displayed while the applet is
being loaded. This message should appear in the space that will be occupied by the applet,
then be replaced by the applet once the applet has loaded.
The code shown above does a number of things to accomplish this.
Two <div>
regions are created in the web page. The first contains the text (or image) to display while
the applet is loading. The second contains the <applet> tag to load the
applet. This second <div> has its visibility style set to hidden. This is
required for IE.
<div id="loading">
<p>Please wait while Java applet loads...</p>
</div>
<div id="myapplet" style="visibility:hidden">
<applet archive="app1.jar" code="app1.class" align="baseline" width="620" height="442">
<p>Requires a browser that supports Java.</p>
</applet>
</div>
Style sheets are defined for the two <div> tags. They both need positional
styles. The style sheet for the <div> containing the
<applet> tag also needs visibility set to hide (this is for Netscape).
Positioning will have to be customized to the position of your applet, this is not a general solution.
<style type="text/css">
#loading {
position:absolute;
left:150;
top:200;
}
#myapplet {
position:absolute;
left:10;
top:10;
visibility:hide;
}
</style>
A JavaScript function is defined which is run when the page loads
(<body onLoad="init()">). Simply, this function hides the
<div> containing the message and shows the <div>
containing the applet.
<script language="JavaScript">
function init()
{
if (document.all)
{
document.all.loading.style.visibility="hidden";
document.all.myapplet.style.visibility="visible";
document.applets[0].repaint();
}
else
{
document.loading.visibility="hide";
document.myapplet.visibility="visible";
}
}
</script>
This method should work equally well to place an image "over" the applet while it's
loading.
