優化 Java Applet 載入體驗：以訊息遮蓋灰色區塊

問題背景

Applet 載入期間，瀏覽器會在預留區域顯示灰色方塊，體驗不佳。本文示範使用 JavaScript 動態切換圖層，在載入完成前顯示「載入中...」訊息，載入完成後自動切換到 Applet 顯示區域。

核心實作

HTML 結構：雙層疊加

<div id="loading" style="position:absolute; left:150; top:10;">
    請稍候，Java Applet 載入中...
</div>
<div id="myapplet" style="position:absolute; left:150; top:10; visibility:hidden;">
    <applet code="charts.ChartsApplet" archive="charts.jar" 
            width="600" height="400" codebase="" VIEWASTEXT>
        <param name="xValue" value="1,2,3,...">
        <param name="yValue" value="22,21,19,...">
    </applet>
</div>

• 兩 <div> 位置、尺寸完全一致 (position:absolute + 同座標)
• loading 預設顯示，myapplet 預設隱藏 (visibility:hidden)

JavaScript 切換邏輯

<script>
function init() {
    // IE (document.all)
    if (document.all) {
        document.all.loading.style.visibility = "hidden";
        document.all.myapplet.style.visibility = "visible";
        document.applets[0].repaint();  // 強制重繪
    } 
    // Netscape 4 (document.layers)
    else {
        document.loading.visibility = "hide";
        document.myapplet.visibility = "visible";
    }
}
</script>
<body onload="init()">

機制原理解析

document.all 觸發時機

document.all 在 IE 中當**頁面所有內容**（含 Applet、圖片、聲音）完全下載並解析完成後才為真。因此 onload 觸發時 Applet 已準備就緒。

瀏覽器相容性處理

現代化改寫 (標準 DOM API)

<div id="loading" style="position:absolute; left:150px; top:10px;">
    <div class="spinner"></div> 載入中...
</div>
<div id="appletContainer" style="position:absolute; left:150px; top:10px; display:none;">
    <applet ...></applet>
</div>

<script>
window.addEventListener('load', function() {
    document.getElementById('loading').style.display = 'none';
    var container = document.getElementById('appletContainer');
    container.style.display = 'block';
    // 現代瀏覽器無需手動 repaint
    var applet = container.querySelector('applet');
    if (applet && typeof applet.repaint === 'function') applet.repaint();
});
</script>

進階優化策略

• 載入進度顯示：Java 1.6+ 支援 DownloadServiceListener (JNLP API) 監聽下載進度
• 骨架屏：以 SVG/CSS 動畫模擬 Applet 介面輪廓，減少感知等待時間
• 預載入關鍵資源：<link rel="preload" href="charts.jar" as="fetch">
• 錯誤處理：監聽 onerror、設定逾時機制，失敗時顯示重試按鈕

適用於其他內嵌物件

同樣技巧適用於：

• <object> / <embed> (Flash、PDF、影片)
• 大型圖片 (<img> + onload)
• iframe 載入外部頁面

1. 上一篇文章： Applet 中正確引用 JAR 封存內資源檔案的關鍵技巧
2. 下一篇文章： Applet 使用 JDBC-ODBC 橋接器連線 MSSQL Server 實作範例

Java 程式設計入門

Effective Java 泛型核心精華：從類型擦除到通配符的完整實戰指南

一、核心原則：拒絕原始類型，擁抱泛型 原始類型（如 List

Java 基礎語法入門完全指南：標識符、數據類型、運算符、流程控制與輸入輸出核心知識圖譜

標識符命名規範 字母、數字、下劃線 _、美元符 $； 首字

Java 匿名內部類實戰：透過介面實現動態行為注入

什麼是匿名內部類？ 匿名內部類是 Java 中一種特殊的內部

J2ME 平台架構與元件深度解析：從 KVM 到 MIDlet 的完整應用開發指南

前言 J2ME 將 Java 網路中心、平台無關特性移植至資