|
|
Home » HTML » Article
Pre-loading Images
|
| Article by: |  Jeff Anderson ( 1362 ) (10/19/2001) |
|
| Summary: | Set up your pages so that the images are in the cache waiting to be used rather than downloading each image as you need it. |
|
| Viewed: 29252 times |
Rating (25 votes): |
|
3.8 out of 5 |
|
|
|
Pre-loading 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. Pre-loading 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 pre-loading 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.
<SCRIPT LANGUAGE="JavaScript">
<!-- hide from non JavaScript Browsers
Image1= new Image(50,60)
Image1.src = "toad1.gif"
Image2 = new Image(70,80)
Image2.src = "toad2.gif"
Image3 = new Image(90,100)
Image3.src = "toad3.gif"
// End Hiding -->
</SCRIPT>
| |
|
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 'Pre-loading Images '
|
Posted by :
 Archive Import (Gudhurath) at 08:34 on Sunday, June 29, 2003
|
i've done that same old thing for my site. when mouseover it's suppose to change into another pic. With 2kb file it doesn't do what it should do
Gudh
| |
Posted by :
 Breeze3239 at 01:27 on Friday, November 21, 2003
|
Where's the rest of the script/code to diplay what we loaded into the cache. I have been hunting for weeks to find it.. And no mouseover, slideshow, random pics, no clickon pics, no links to pic..ect.ect.. Just plain ole show the pics..script...? And then I maybe can write my script from there.. WAaaaaaaa I want my Commodore Back......
| |
|
To post comments you need to become a member. If you are already a member, please log in .
 
| RELATED ARTICLES |
Image Submit Button
by Jeff Anderson
You can keep your forms from slipping into mundanity by substituting the default gray submit button to a colourful graphic of your choosing. |
 |
Parent _self _blank and _top Frame Target Specifications
by Jeff Anderson
How to specify frames and how to break out of them using standard link tags. |
|
Pre Tag
by Jeff Anderson
No need to reformat text files with line breaks and tabs if you use the pre tag |
|
Image Rollovers
by Jeff Anderson
A bit of code to swap to different images on the page. You often see this on sites
to display a rollover on the navigation buttons. |
|
ASCII characters and their codes
by Jeff Anderson
A full list of all the ASCII characters. |
|
In-Line Frames (IFrames)
by Jeff Anderson
Inline frames or IFrames are the ones which appear in the midst of a standard page, but actually reference a totally separate url. |
|
Validate Date
by Kannadasan Ramiah
Validating Date entered in a text box, pure HTML page |
|
HTML Hspace and Vspace Image Borders
by Jeff Anderson
A lesser known feature in HTML is the ability to add a blank border around images both horizontally and vertically. |
|
Creating Navigation with Frames
by Jeff Anderson
The most popular use of frames is to allow a static navigation to stay on one part of the screen (in one frame) while the content changes in another. |
|
The OSI Reference Model - A Clear and Concise Illustration !
by James Opiko
The OSI Reference Model - A Resource For IT Certification Candidates & Networking Professionals |
|
| |
