優化 Java Applet 載入體驗：JavaScript 動態顯示載入提示替代灰色佔位區

痛點：Applet 啟動期的灰色方塊

傳統 <applet> 標籤在 JVM 啟動、類下載、驗證、初始化期間，瀏覽器會顯示一塊難看的灰色矩形，用戶無法得知載入進度，體驵極差。

解決方案：雙層疊加 + onLoad 切換

HTML 結構

<body onload="init()">
  <!-- 第 1 層：載入提示，初始可見 -->
  <div id="loading" style="position:absolute; left:150px; top:10px;">
    正在載入 Java Applet，請稍候...
  </div>

  <!-- 第 2 層：Applet 容器，初始隱藏 -->
  <div id="myapplet" style="position:absolute; left:150px; top:10px; visibility:hidden;">
    <applet code="charts.charts.class" archive="charts.jar"
            width="600" height="400" viewastext>
      <param name="xValue" value="...">
      <param name="yValue" value="...">
    </applet>
  </div>
</body>

JavaScript 邏輯

<script language="JavaScript">
function init() {
    // IE: document.all 在頁面所有資源（含 Applet）下載完成後為真
    if (document.all) {
        document.all.loading.style.visibility = "hidden";
        document.all.myapplet.style.visibility = "visible";
        document.applets[0].repaint(); // 強制重繪
    }
    // Netscape 6+ / Mozilla
    else {
        document.loading.visibility = "hide";
        document.myapplet.visibility = "show";
    }
}
</script>

關鍵點解析

1. 絕對定位疊加：兩層 left/top 必須完全一致，實現無縫切換。
2. document.all 時機：IE 中該屬性在所有資源（圖片、Applet、腳本）下載完畢後才為真，完美契合「Applet 就緒」時刻。
3. 跨瀏覽器兼容：Netscape 使用 document.layerName.visibility；現代瀏覽器建議改用 document.getElementById() 統一 API。
4. repaint() 關鍵：Applet 從隱藏轉顯示時，部分 JVM 不會自動觸發重繪，必須顯式調用。

現代化改良建議

• 改用 <object> + deployJava.js（Oracle 官方部署工具）實現更豐富的載入進度條、版本檢測、自動安裝 JRE。
• 若維護舊系統，可在 loading 層內嵌入動畫 GIF 或 CSS 動畫提升視覺反饋。
• 注意：Applet 技術已被主流瀏覽器棄用（Chrome 45+、Firefox 52+、Edge 不再支援 NPAPI），新項目請遷移至 Web Start、JavaFX WebView 或純 Web 技術。