New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

FF1+ IE5+ Opr7+

Preload Image (with progress bar) Script

Description: Use this script to not only preload any number of images before displaying them, but also, get a live update on it's progress through an update bar. Once the preloadiing is complete, the surfer is then directed to the page containing the preloaded images. Superbly useful and cool a creation!

Demo: You just saw it in the previous page. (Note: For sake of not clogging up this page with images, the preloaded images in the demo are not displayed here). Click here to see it again.


Directions: Developer's View

Step 1: Copy the entire code below, and save it as a separate HTML page (ie: preload.htm).

Select All

Remember, save it as a SEPARATE HTML file. This is the page that will preload your selected images.

Step 2: You'll also want to grab the following two gifs, and upload it along with the above html file. They are used to make up the progress bar:

bar.zip (zip file contains "black.gif" and "blue.gif")

You are essentially done. All that's left is configuring the variables inside the above code to specify which images to preload, and the destination URL after this is complete. Simply refer to documentation inside. Enjoy!