DHTML Image Preloader
This script preloads images and displays the percentage loaded, before calling a user-defined Javascript function.

To use this script, copy bt_loader.js to your HTML directory, then put the code below into your HTML where you want the loader bar to appear (you will have to modify things as per the comments). Do a view source on this page for an example.

<!-- START LOADER -->
<style type="text/css">
  #bt_container {font-family:courier, serif; font-size:9px;}
</style>
<script type="text/javascript">
  // Time in seconds to wait before giving up on preload (broken 
  // images can cause the load to never get to 100%).
  
  var bt_timeout = 8;
  
  
  // Array of images to load; feel free to make this as long or
  // as short as you want. First element is filename (include path
  // to file), second is size of images in kB.
  
  var bt_preimages = [
    ['test1.gif',2.35],
    ['test2.gif',2.35],
    ['test3.gif',2.35],
    ['test4.gif',1.29],
    ['test5.gif',2.35],
    ['test6.gif',1.29],
    ['test1.gif',2.35]
    ];
  
  
  // Text to use for when loading has finished
  var bt_text_finished = 'Done';
  
  // Text to prefix the percentage
  var bt_text_prefix = 'Loaded: ';
  
  
  function bt_done() {
    // stub function called when script is finished, put your JS here.
    // (you could use a javascript to redirect the user)
    
    }
</script>
<script type="text/javascript" src="bt_loader.js"></script>
<!-- END LOADER -->

[back to bodytag]