Progressbar Script


When this page fully loads, it automatically "caches" the images that aren't displayed yet. Caching is useful for games or onmouseover events where you want all the potential images loaded so the user doesn't have to wait for them to download when the image needs to be displayed. This script, while caching the images, also shows the progress via a progress bar. When all the images are done loading, the loaded images are now ready for use. If you simply don't want to see the bar, you can click it with the mouse and it will disappear. The action() function is also run when you click it. See below for more info on this.

There is a function in the script called action(). This function is run once all the images are done loading. Currently, this function is set to hide the bar, but can be changed easily. See the .js file for more directions on how to use this.

There is a bug when using NS6: When the user goes back to the page or refreshes the page, the bar never disappears. You can click the bar with the mouse to force it to disappear or you can mess around with the history object so you can't return to the progressbar page.

Incidentally, the images being cached in this example are just arbitrary images of about 4Kbytes apiece to illustrate the loading process.



Instructions:



1: Copy and paste the following script in the BODY section of your page:
Select all...



2: Adjust the settings in the js file. You can set the bar width, height, and colors. You can also set the font properties of the text in the bar. Placement of the bar is determined by where you paste the code in step 1 into your page.


3: Finally, upload the "progressbar.js" file to your server.