程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> JAVA編程 >> 關於JAVA >> 更好的Applet體驗:海報幀

更好的Applet體驗:海報幀

編輯:關於JAVA

在本系列文章的第一部分中,我向你展示了如何使用設置加載時圖片,包括動態的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元素的屬性與嵌套的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版本,並啟動更新程序。

重復一遍,如果你在某個平台或浏覽器中發現了任何錯誤,請讓我知道,以便更新這個腳本。

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved