|
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 progress bar automatically disappears and 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, but the images are still being cached in the background.
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. There is a variable in the script called "imagesdone". This variable starts with a boolean value of FALSE, but becomes TRUE when all the images are done loading. You can use this variable in your page for whatever test you need to do (if any). You do not *need* to use this, it is just there for your convenience. Note: If you DO use it, make sure the HTML that loads this script comes before any script that uses the "imagesdone" variable, otherwise you will get script errors (because the variable doesn't exist yet). There is also a "conveneince" function where you can put javascript commands (such as a redirect) that will execute once the images are done loading. Look at the progressbar.js source code to use this feature. Incidentally, the images being cached in this example are just arbitrary images of about 4Kbytes apiece to illustrate the loading process. |