更好的Applet体验：海报帧

在本系列文章的第一部分中，我向你展示了如何使用设置加载时图片，包括动态的GIF自旋体图片。这次，我将向展示如何使用屏幕截图或海报帧去加快页面的加载。

Quicktime电影就有海报帧的思想。电影中的一帧(经常就是其中的第一帧)将会放到该电影出现的地方。当用户点击海报帧时，实现的电影才会通过网络被加载进来。这就能极大地加快该电影所在Web页面的加载速度。使用少许JavaScript，完全可以为Java Applet实现相同的功能。

Applet的海报帧

在研究这个Demo之前，我必须要提到，我个人尚未在IE浏览器中测试过这个Demo。如果你发现这个Demo不能在某个浏览器中运行，请向错误信息发送给我，以便我能更新这个JavaScript。

基本思想非常的简单，创建一个div，它包含一个链接和一张屏幕截图。当用户点击该链接时，我们使用一个新的applet元素去替换页面中的a和img元素。一旦浏览器察觉到了这个新的applet元素，它将下载Java插件并启动这个Applet。

这就有一个例子：如果你点击了这张图片，一个Applet就会被加载到该图片所在的位置，并会说"applet loaded"。

JavaScript

如下就是这个JavaScript脚本：

<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 != ''#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>

更好的Applet体验：海报帧(2)

该脚本的第一部分初始化了两个哈希表，它们包含了applet元素的属性与嵌套的param标签。然后，它会使用document.createElement()方法去创建这个applet，并配置其中的属性与PARAM元素。到目前为止，还很直接。真正地奇妙之事发生在generateInlineAppletTag函数的最后四行。它使用传入的appletID参数与包含着上述链接与图片的div元素相联在一起，然后它会找到并删除该链接，而用新的applet元素去替代这个链接。

HTML

要使用上述javascript函数，你只需将它放到页面的顶部，并通过那张屏幕截图链接的href去调用它。在本例中，我使用了：

<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>

这个div被命名为appletDiv，链接被命名为screenshot1。该链接的href会调用上述javascript函数，并传入div与链接的名称。最后该图片就只是显示将要运行的Applet的一张屏幕截图，该图被一个播放按钮覆盖着。就这么简单，在这里你可以看到完整的javascript和HTML语句。

结论

这个javascript只是一个开始。你还能很容易的扩展它，使图片上能展现关于这个Applet的更多信息。你也可以把这个javascript重写为一个更加可重用的形式，使它能够被你的整个站点所共享。

下次我将向你展示如何使用新的发布工具包去侦测当前已安装的Java版本，并启动更新程序。

重复一遍，如果你在某个平台或浏览器中发现了任何错误，请让我知道，以便更新这个脚本。

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!