John Jiang

a cup of Java, cheers!
https://github.com/johnshajiang/blog

   :: 首页 ::  :: 联系 :: 聚合  :: 管理 ::
  131 随笔 :: 1 文章 :: 530 评论 :: 0 Trackbacks
更好的Applet体验:海报帧
本文是Joshua Marinacci的系列博客A Better Applet Experience中的第二篇,介绍了如何使用海报帧去加快页面的加载。(2008.11.02最后更新)

    在本系列文章的第一部分中,我向你展示了如何使用设置加载时图片,包括动态的GIF自旋体图片。这次,我将向展示如何使用屏幕截图或海报帧去加快页面的加载。
    Quicktime电影就有海报帧的思想。电影中的一帧(经常就是其中的第一帧)将会放到该电影出现的地方。当用户点击海报帧时,实现的电影才会通过网络被加载进来。这就能极大地加快该电影所在Web页面的加载速度。使用少许JavaScript,完全可以为Java Applet实现相同的功能。

Applet的海报帧
    在研究这个Demo之前,我必须要提到,我个人尚未在IE浏览器中测试过这个Demo。如果你发现这个Demo不能在某个浏览器中运行,请向错误信息发送给我,以便我能更新这个JavaScript。
    基本思想非常的简单,创建一个div,它包含一个链接和一张屏幕截图。当用户点击该链接时,我们使用一个新的applet元素去替换页面中的aimg元素。一旦浏览器察觉到了这个新的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元素的属性与嵌套的param标签。然后,它会使用document.createElement()方法去创建这个applet,并配置其中的属性与PARAM元素。到目前为止,还很直接。真正地奇妙之事发生在generateInlineAppletTag函数的最后四行。它使用传入的appletID参数与包含着上述链接与图片的div元素相联在一起,然后它会找到并删除该链接,而用新的applet元素去替代这个链接。

HTML
要使用上述javascript函数,你只需将它放到页面的顶部,并通过那张屏幕截图链接的href去调用它。在本例中,我使用了:
<div id="appletDiv">
<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版本,并启动更新程序。
重复一遍,如果你在某个平台或浏览器中发现了任何错误,请让我知道,以便更新这个脚本。

posted on 2008-11-02 10:57 John Jiang 阅读(1609) 评论(2)  编辑  收藏 所属分类: Java翻译AppletGUI

评论

# re: 更好的Applet体验:海报帧(译) 2008-11-02 11:20 duduli
翻译的啊。 我看了英文就头晕。并不是因为看不懂,是英文对英文有恐惧症啦。  回复  更多评论
  

# re: 更好的Applet体验:海报帧(译) 2008-11-02 13:26 Sha Jiang
> 翻译的啊。 我看了英文就头晕。并不是因为看不懂,是英文对英文有恐惧症啦。
翻译的一般,完全是出于学习的目的 :-)  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: