Click to Start Applets

Introduction
This tutorial demonstrates a simple technique to delay the loading of a java applet until the user is ready to see it.

Java Applets are heavyweight components and having them start immediately on a webpage can be slow and effect the user experience. Further, when running powerful signed applets (e.g. LWJGL Applets) you don't want a permissions dialog appearing immediately on the page loading and may want to explain or even show instructions to the user about the dialog.

This tutorial builds on the excellent article Delayed Applet Loading from kaioa.com. You should have a read of that for an overview of the many different approaches available for this problem.

Solution
I have chosen to use the innerHTML method as it seems to be simplest and one that works best across the different browsers. It also has the following advantages:

  • The Applet tag can remain in pure html and does not need to be embeded inside javascript code, which can quickly get ugly and hard to modify.
  • The Applet will continue to work normally when javascript is disabled. If javascript does not run then the click to start mechanism will not be added but applet will still run.
  • No need to fiddle with multiple html files, something you have to do when working with iFrames.
  • Same code works on all browsers with only a small browser specific hack.

How it works
The applet tag is placed inside a div tag.

<div id="appletbox" style="width:480px;height:240px;">
	<applet code="TestApplet.class" codebase="." width="480" height="240">
	</applet>
</div>

When the javascript code is run it calls the hideApplet() method, this immediately saves a copy of the applet tag and replaces it with a clickable image. This is done before the web page loads so that the java applet does not even start before it is replaced. Once the image is clicked the showApplet() method is called and the image tag is replaced with the stored applet tag.

<script type="text/javascript">
	var appletTag;
 
	hideApplet(); // replace applet with clickable image
 
	function hideApplet(){
		var appletbox=document.getElementById('appletbox');
    		appletTag = appletbox.innerHTML;
 
		appletbox.innerHTML='<img src="play.png" style="cursor:pointer;" onclick="showApplet()">';
	}
 
	function showApplet(){
		var appletbox=document.getElementById('appletbox');
		appletbox.innerHTML = appletTag;
	}
</script>

A small fix for IE *surprise*
The above should work on all browsers. There is however an issue with every web developers favourite browser, Internet Explorer. For some odd reason it strips out the <param> tags from the innerHTML, these are needed inside the java tag when there is a need to pass parameters to a java applet.

You can work around this IE problem by using getElementsByTagName to get the parameters from the applet tag and then manually insert them into the saved applet tag.

<script type="text/javascript">
	var appletTag;
 
	hideApplet(); // replace applet with clickable image
 
	function hideApplet(){
		var appletbox=document.getElementById('appletbox');
    		appletTag = appletbox.innerHTML;
 
		if (navigator.appName == 'Microsoft Internet Explorer') {
			var params = "";
			var p = appletbox.getElementsByTagName("PARAM");
			for(var i=0; i < p.length; i++) {
			    params += p[i].outerHTML;
			}
			appletTag = appletTag.replace("</APPLET>", params+"</APPLET>");
		}
 
		appletbox.innerHTML='<img src="play.png" style="cursor:pointer;" onclick="showApplet()">';
	}
 
	function showApplet(){
		var appletbox=document.getElementById('appletbox');
		appletbox.innerHTML = appletTag;
	}
</script>

An example of the above is found below.


The download package found here contains simple examples of the above code.

Conclusion
You can configure the splash screen in anyway possible using html/javascript and need not be limited to just a static clickable image.

I am always looking for improvements and simpler solutions to the above. Please feels free to post any idea's, improvements or comments below.