優化 Applet 體驗：海報幀技術實現秒開頁面

什麼是海報幀？

QuickTime 電影採用海報幀：頁面載入時只顯示一張靜態圖片（通常是影片第一幀），用戶點擊後才真正下載播放器與影片內容。這極大加快頁面渲染速度。同樣邏輯適用於 Java Applet。

核心原理

1. 頁面放一個 <div>，內含圖片連結（海報幀）。
2. 用戶點擊圖片，JavaScript 動態創建 <applet> 元素替換圖片。
3. 瀏覽器檢測到新 applet 標籤，啟動 Java 插件並加載 Applet。

完整實現代碼

JavaScript 核心函數

<script>
function generateInlineAppletTag(appletID, screenshotID) {
    var attributes = {
        code: 'animatedstartup.MainApplet',
        width: 100,
        height: 100,
        archive: 'https://projects.joshy.org/demos/AnimatedStartup/AnimatedStartup.jar',
        id: 'fooApplet'
    };
    var parameters = {
        image: 'https://projects.joshy.org/demos/AnimatedStartup.gif',
        centerImage: 'true'
    };

    var appletTag = document.createElement("applet");
    for (var attr in attributes) {
        appletTag.setAttribute(attr, attributes[attr]);
    }
    if (parameters) {
        for (var param in parameters) {
            var p = document.createElement("PARAM");
            p.setAttribute("name", param);
            p.setAttribute("value", parameters[param]);
            appletTag.appendChild(p);
        }
    }

    var container = document.getElementById(appletID);
    var screenshot = document.getElementById(screenshotID);
    container.removeChild(screenshot);
    container.appendChild(appletTag);
}
</script>

HTML 結構

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

關鍵細節

• appletDiv 為容器，screenshot1 為圖片連結 ID。
• 連結 href 直接調用 JS 函數，傳入容器與圖片 ID。
• 圖片可疊加播放圖標，提示用戶可點擊。
• JS 最後四行：找到容器、移除圖片、插入動態創建的 applet 元素。

擴展建議

1. 在圖片上顯示 Applet 名稱、版本、預估加載大小等資訊。
2. 將 JS 封裝為可複用組件，全站共享。
3. 結合部署工具包偵測 JRE 版本，引導更新。

注意事項

作者未在 IE 中測試，若發現瀏覽器相容性問題請回報。此技術在 Java SE 6 Update 10 前即可使用，無需新版本支援。