show loading status message until the applet is fully loaded

Sat Nov 08, 2008 9:37 am

Show code is used to show loading status message until the applet is fully loaded to the browser.

html code

<html>
    <head>
      <title>Your Title Here</title>
    </head>

    <script language="JavaScript">

      <!-- Hide script from old browsers

      function init()
      {
        // Microsoft Internet Explorer

        if (document.all)
        {
          document.all.loading.style.visibility="hidden";
          document.all.myapplet.style.visibility="visible";
          document.applets[0].repaint();
        }
        // Netscape Navigator

        else
        {
          document.loading.visibility="hide";
          document.myapplet.visibility="visible";
        }
      }

      // -->

    </script>

    <style type="text/css">

      #loading {
        position:absolute;
        left:150;
        top:200;
      }

      #myapplet {
        position:absolute;
        left:10;
        top:10;
        visibility:hide;
      }

    </style>

    <body onLoad="init()">

      <div id="loading">
        <p>Loading  applet, please wait.</p>
      </div>

      <div id="myapplet" style="visibility:hidden">
        <applet archive="app1.jar" code="app1.class" align="baseline" width="620" height="442">
          <p>Requires a browser that supports Java.</p>
        </applet>
      </div>

    </body>
  </html>

The Solution Explained

First, let's explain exactly what we're trying to do here. We want a message, such as "Loading applet, please wait." to be displayed while the applet is being loaded. This message should appear in the space that will be occupied by the applet, then be replaced by the applet once the applet has loaded.

The code shown above does a number of things to accomplish this.

Two <div> regions are created in the web page. The first contains the text (or image) to display while the applet is loading. The second contains the <applet> tag to load the applet. This second <div> has its visibility style set to hidden. This is required for IE.

html code

<div id="loading">
        <p>Loading  applet, please wait.</p>
      </div>

      <div id="myapplet" style="visibility:hidden">
        <applet archive="app1.jar" code="app1.class" align="baseline" width="620" height="442">
        <p>Requires a browser that supports Java.</p>
      </applet>
      </div>

Style sheets are defined for the two <div> tags. They both need positional styles. The style sheet for the <div> containing the <applet> tag also needs visibility set to hide (this is for Netscape). Positioning will have to be customized to the position of your applet, this is not a general solution.

css code

<style type="text/css">

      #loading {
        position:absolute;
        left:150;
        top:200;
      }

      #myapplet {
        position:absolute;
        left:10;
        top:10;
        visibility:hide;
      }

    </style>

A JavaScript function is defined which is run when the page loads :
javascript code

(<body onLoad="init()">).

Simply, this function hides the <div> containing the message and shows the <div> containing the applet.

javascript code

<script language="JavaScript">

      function init()
      {
        if (document.all)
        {
          document.all.loading.style.visibility="hidden";
          document.all.myapplet.style.visibility="visible";
          document.applets[0].repaint();
        }
        else
        {
          document.loading.visibility="hide";
          document.myapplet.visibility="visible";
        }
      }

    </script>

This method should work equally well to place an image "over" the applet while it's loading.