Josh On Design

In part one of this series I showed you how to set up a loading image, including an animated spinner gif. In this part I'll show you how use a screenshot or poster frame to speed up page loading.

Quicktime movies have the concept of a poster frame. It's a single frame of the movie (often the first frame) which is loaded in place of the movie. The actual movie will only be loaded over the network when the user clicks on the poster frame. This greatly speeds up loading the webpage the movie is in. Using a bit of Javascript we can do the exact same thing for Java Applets.

Poster Frames for Applets

Before we get into this demo I must mention that I haven't personally tested this on IE yet. If you find a browser that this doesn't work on please send me the error so I can update my javascript.

The basic idea is pretty simple. We create a div containing a link and an image of the screenshot. When the user clicks on the link we use javascript to replace the a and img elements in the page with a new applet element. Once the browser sees the new applet element it will load the Java plugin and start the applet.

Here is an example. If you click on the image a real applet will load in it's place and say 'applet loaded'

The Javascript

Here is the script which does it:

<script>
function generateInlineAppletTag(appletID, screenshotID) {
    var attributes = {
        code:'animatedstartup.MainApplet',
        width:100,
        height:100,
        archive:'http://projects.joshy.org/demos/AnimatedStartup/AnimatedStartup.jar',
        id:'fooApplet'
    };
    var parameters = {
        image:'http://projects.joshy.org/demos/AnimatedStartup.gif',
        centerImage:'true'
    };
    
    
    var appletTag = document.createElement("applet");
    
    for (var attribute in attributes) {
        appletTag.setAttribute(attribute,attributes[attribute]);
    }
    
    if (parameters != 'undefined' && parameters != null) {
        for (var parameter in parameters) {
            var param = document.createElement("PARAM");
            param.setAttribute("name",parameter);
            param.setAttribute("value",parameters[parameter]);
            appletTag.appendChild(param);
        }
    }
    
    
    var bodyRef = document.getElementById(appletID);
    var screenshot = document.getElementById(screenshotID);
    bodyRef.removeChild(screenshot);
    bodyRef.appendChild(appletTag);
}
</script>

The first part of script initializes two hashmaps containing the applet element's attributes and the nested param tags. Then it creates the applet using the document.createElement() method, and then configures the attributes and PARAM elements. So far this is pretty straight forward. The real magic happens in the last four lines of the generateInlineAppletTag function. It grabs the div element that surrounds the link and image using the passed in appletID parameter. Then it finds and removes the link and replaces it with the new applet element.

The HTML

To use this javascript function you just put it in the top of your page and call it from the href of your screenshot link. In this example I used this:

<div id="appletDiv">
<a id="screenshot1" href="javascript:generateInlineAppletTag('appletDiv','screenshot1');">
<img src="http://projects.joshy.org/demos/AnimatedStartup/applet_screenshot.png" border="0"
/>
</a>
</div>

The div is named appletDiv and the link is named screenshot1. The link's href invokes the javascript function, passing in the name of the div and link. Finally the image just shows a screenshot of the running applet overlaid with a play button. That's it. You can see the full HTML and Javascript here.

Conclusion

This javascript is just the start. You could easily extend it to have a rollover on image with more information about the applet. You could also rewrite the javascript into a more reusable form that could be shared across your entire site.

Next time I'll show you how to use the new deployment toolkit to auto detect the currently installed version of Java and start an upgrade.

Again, if you find any errors in this on particular platforms or browsers, please let me know so I can update it.