PRELOADING IMAGES USING BROWSER CACHE
PRELOADING IMAGES USING BROWSER CACHE
Pre-loading images, html files and flash files can really speed up your website. By using the browsers cache we can accomplish this and you can provide your users with a faster loading website. However before we jump into this tutorial it is very important that you understand exactly what cache is.
So what is cache you may be wondering? Well every WebPages
that you view gets saved in a special folder on your hard drive, this folder
varies depending on the browser you are using. Internet Explorer for example
stores its cache in a folder called Temporary Internet Files which
is located at C:\Documents and Settings\UserName\Local Settings\Temporary
Internet Files. Mozilla Firefox stores it in several Cache folders which
you can find in C:\Documents and Settings\UserName\Application
Data\Mozilla\Firefox\Profiles\5ds62m47.default. Keep in mind that both
the Application Data and Local Settings folder are
hidden, so in order to view them you will need to go into Tools >
Folder Options... > View > Show Hidden Files and Folders.
When the browser stores a websites files in its cache the next time you want to load that WebPages again the browser loads the page and images from your cache rather than redownloading them all over again. This makes the WebPages appear to be loading faster.
So now that we have covered what Cache is lets move on to how we are going to manipulate the browsers Cache to preload some images or html files. The technique we are going to be using is particularly helpful when you are using rollovers or extensive navigation graphics. In order to help us accomplish this preloading effect we are going to call upon some Javascript. Take a look at the script below:
<script type="text/javascript">
<!-- hide from non JavaScript Browsers
Image1= new Image(150,20)
Image1.src = "pic1.gif"
Image2 = new Image(10,30)
Image2.src = "pic2.gif"
Image3 = new Image(72,125)
Image3.src = "pic3.gif"
// End Hiding -->
</script>
That script will preload the images you specify. Image1=
new Image is basically the first step in
Javascript which tells the browser that we are setting up a new image script
effect. (150,20)
specifies the images width and height, respectively. Image1.src
= "pic1.gif" is what specifies the
source of the image.
I recommend that you place this script near the top of your website, or even better put it in between your <head></head> tags, this will ensure that the script loads as fast as possible.