|
|
Home » Javascript » Article
Using Javascript to Pre-load Images
|
| Article by: |  Jeff Anderson ( 1362 ) (3/24/2002) |
|
| Sponsored by: |
Neil Matthews Hypnotherapy, Wilmslow |
| Summary: | Using Javascript to Pre-load Images doesn't speed up the load time of the page of course, but it can mean avoiding the ugly site of your page before it's fully dressed and ready to present itself to the world. |
|
| Viewed: 35254 times |
Rating (11 votes): |
|
3.2 out of 5 |
|
|
|
Using Javascript to Pre-load Images
Sometimes it's important to load in the images to a page before the main body of the page loads, so that they are
visible immediately with the rest of the content. Using Javascript to Pre-load Images doesn't speed up the load time of the page of course,
but it can mean avoiding the ugly site of your page before it's fully dressed and ready to present itself to the world. Pre-loading is
also particularly important with image rollovers to make the effect smooth and convinving. See our Image Rollovers Script.
The Cache
Pre-loading uses a feature of browser technology known as the cache. The cache is the part of your computer where the
web page gets stored when you download it. Ever noticed that when you return to a web page it loads in far quicker than
the first time? That's because the files are still stored in your machine's cache and don't have to be downloaded again.
If you use Internet Explorer you can view your cache files in the 'Temporary Internet Files' folder on your main drive.
The idea of Using Javascript to Pre-load Images is to load them in to the cache before they're even needed.
This means that when they are called for they'll appear almost immediately.
Here's the script to load in the images. It uses a little simple javascript.
Here we've loaded in three images: toad1.gif, toad2.gif and toad3.gif.
The numbers in the brackets are the width and height, respectively, of each image
and the code Image1.src = "toad1.gif" gives the source of the image.
Place the script near the top of your page, preferably in the HEAD tag.
This will ensure the images load before the main content of the page.
|
|
View highlighted Comments
 User Comments on 'Using Javascript to Pre-load Images '
|
Posted by :
 Archive Import (JT) at 14:33 on Sunday, April 06, 2003
|
It's more of a question. Is there a similar structure/command for loading other files, such as mp3s?
| |
|
To post comments you need to become a member. If you are already a member, please log in .
 
| RELATED ARTICLES |
Javascript - Enable and Disable form elements
by Jeff Anderson
This is a relatively little known and under-used feature of javascript which can be very useful in guiding a user through a form. Using the disabled tag, you can switch on and off elements in a form. |
 |
Javascript Onload Event
by Jeff Anderson
Sometimes you need to perform an action immediatley after the page has loaded. That's when the onLoad Event Handler comes in handy |
|
Check IsNumeric Function
by Jeff Anderson
A javascript validation function to check whether the details entered by a user are numeric. |
|
Form Validation Function
by Jeff Anderson
A javascript validation function that you can use to validate all types of forms. |
|
JavaScript Field Is Empty Form Validation
by Jeff Anderson
This javascript function allows you to check whether a form field has been completed or not. |
|
Javascript Get Selected Text
by Jeff Anderson
A cross-browser script to get text selected by the user |
|
Check Email Validation Function
by Jeff Anderson
A javascript validation function to check whether the user has entered a valid email address in a form. |
|
Validate Form and Disable Submit Button
by Marylou Marks
I have a form that validates info, but I also want to disable the submit button. The disable part worked before adding the form validating. |
|
Multiple submit buttons on a single form
by Kiran Pai
This script shows you how to submit the contents of a form to different programs depending on which Submit button you press. Additionally it also shows how to call two different functions when you press the Submit button. |
|
Simple date validation
by Chris Hogben
function that takes a date in three parts, day, month and year - returns true if it's a valid date. |
|
| |
