This section is only of interest when you have images on your pages.
Why: The menu is created by adding HTML elements to loaded documents. This can only be done when the whole document, including all images, is loaded. When the menu is used in a frameset the menu can start after all documents that make up the frameset are loaded. Again including all images.
 
When your document contains mostly text, it is not to bad, but when your documents also has images, loading can take a lot of time, causing the menu to appear late.
There is no way around this. The page must be completely loaded before the menu starts. But there is a way to let the browser think the page is loaded, have the menu started and then finish the loading.
 
The idea is simple: Replace all images in your document(s) with the same, quick loading image. (I use an transparent gif of 1*1 pixel) When the page, including the dummy images, is loaded, build the menu and after that replace the dummy images with the real ones. The user will not see the difference.

Transparent image blown to 80*80 pixels
Same image 1*1 pixel
How: When the menu is used across frames
1- Prepare your images. Every image must have at least the following properties:
name, src, width and height
<img src='MyImage1.jpg' name='ImageID1' width='number' height='number'>
2- Create an array and some javascript just after the body tag of the document containing the images.
Name the array ImgArr. The array is filled with your images' names and sources. The names and sources are listed in couples: name1,source1, name2,source2,.........
<script type='text/javascript'>
   var ImgArr=['ImageID1','MyImage1.jpg','ImageID2','MyImage2.jpg',.............];
 
   function SwapImgs(){
      var M_A,M_Al,i;
      if(typeof(window.ImgArr)!='undefined'){
         M_A=window.ImgArr;M_Al=M_A.length;
         for (i=0;i<M_Al;i+=2)document.images[M_A[i]].src=M_A[i+1]}}
</script>
</body>
The first line declares the variables M_A, M_Al and i
The second line checks if the document contains the array ImgArr
The variables M_A and M_Al get the values of the array and the array length and the last line replaces the images.
3- Replace your images with the dummy.
All your image tags will now look like: <img src='cell.gif' name='ImageID1' width='number' height='number'>
Create or extend an existing body onload with SwapImgs()
<body onload="SwapImgs()">

  When the menu is used on a single page
1- Prepare your images. Every image must have at least the following properties:
name, src, width and height
<img src='MyImage1.jpg' name='ImageID1' width='number' height='number'>
2- Create an array just after the body tag of the document.
Name the array ImgArr. The array is filled with your images' names and sources. The names and sources are listed in couples: name1,source1, name2,source2,.........
<script type='text/javascript'>
   var ImgArr=['ImageID1','MyImage1.jpg','ImageID2','MyImage2.jpg',.............];
</script>
Replace the empty function AfterBuild in the variable file with:

   function AfterBuild(){
      var M_A,M_Al,i;
      if(typeof(window.ImgArr)!='undefined'){
         M_A=window.ImgArr;M_Al=M_A.length;
         for (i=0;i<M_Al;i+=2)document.images[M_A[i]].src=M_A[i+1]}}
3- Replace your images with the dummy.
All your image tags will now look like: <img src='cell.gif' name='ImageID1' width='number' height='number'>