Better applet experience: Poster Frames

In the first installment of this series, I showed you how to use the set load-time picture, including the animated GIF spin-body picture. This time, I'm going to show you how to use screenshots or poster frames to speed up the loading of the page.

QuickTime movie has the idea of poster frames. A frame (often the first frame) in a movie will be placed where the movie appears. When the user clicks on the poster frame, the implemented movie is loaded through the network. This can greatly speed up the load on the Web page where the movie is located. With a little bit of javascript, you can achieve the same functionality for Java applets.

The poster frame of the applet

Before studying this demo, I have to mention that I have not tested this demo in IE browser. If you find that this demo cannot be run in a browser, send me the error message so that I can update the JavaScript.

The basic idea is very simple, create a div, it contains a link and a screenshot of the screen. When the user clicks on the link, we use a new applet element to replace the A and IMG elements in the page. Once the browser perceives the new applet element, it downloads the Java plugin and launches the applet.

Here's an example: If you click on this picture, an applet will be loaded into the image's location and will say "applet loaded".

Javascript

The following is the JavaScript script:

 <script> 
 Function Generateinlineapplettag (Appletid, Screenshotid) {
 var attributes = {
 Code: ' An Imatedstartup. Mainapplet ', 
 width:100, 
 height:100, 
 Archive: ' http://projects.joshy.org/demos/AnimatedStartup/Animated　　Startup.jar ', 
 ID: ' Fooapplet ' 
}; 
 var parameters = {
 Image: ' Http://projects.joshy.org/demos/AnimatedStartup.gif ', 
 CenterImage: ' True ' 
};
   
   
 
   
 var applettag = document.createelement ("applet"); 
   
　　
   
 for (var in attributes) {
   
 Applettag.setattribute (Attribute,attributes[attribute]); 
   
　　　　　　
   
 
   
 if (Parameters!= ' #ff0000 ' && 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>