|
Progress Bar
Free Javascript
Compliments of http://scriptasylum.com/
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.
You can specify an action to take place when the bar is clicked with the mouse. The action(s) to take place when this happens is determined by a function called clickBar(). This can be used to cancel the progressbar if the user clicks it. If you do not want anything to happen, just remove everything in this function.
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:
Be sure to check-out these progress bars too!
- Progress Bar - 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.
- Timer (Timed) Bar - This script shows a progress bar used as a timer. You set the total time for delay.
- Pop-up Progress Bar - Todd's popup progress bar script is used to provide a visual update of an event in progress. Use it, for example, to display a delay before redirecting to another page or loading a script/application.
Process Progress Bar
Free Javascript
courtesy of http://www.ebusinesshelpcenter.com/
|