|
Preload your images with javascript so that they can be used more quickly when you have
an image script. Typically used with a rollover script.
Preloading images is a technique often used in Rollover Effects or
other image scripts which work more quickly when the images for them are loaded
as soon as possible.
What javascript does is allow you to start loading the images
in the HEAD section of your page, which means that with this technique
(unless the images are large or great in number) your viewers will have
the necessary images in their browser's cache before the script starts
to run. This way, an image rollover will be less likely to make the
viewers wait for the browser to download the second image, because it
is in their browser's cache.
To get this going, you need to have a small section of script in the HEAD section of your page. Here is a sample of
a script that preloads a single image:
<SCRIPT language="JavaScript">
<!--
pic1= new Image(100,25);
pic1.src="http://someplace.com/image1.gif";
//-->
</SCRIPT>
The first command defines a new image object, giving it a width of 100 and a height of 25. You would replace these with the
width and height of your image. The second defines the url or web address of the image. You would replace this with the url
of your image. Not too bad now, is it?
However, there is a chance your viewer will come through with an older browser which doesn't support the image object. So, to
be on the safe side you may wish to implement a form of Browser Detection or
Object Detection to keep from giving the older browsers a javascript error. I will use the shorter one here,
which is object detection.
Here, we want to know if the image object exists, which in javascript is "document.images". So, we just need to check for it
with an if condition, and then run the preloading code:
<SCRIPT language="JavaScript">
<!--
if (document.images)
{
pic1= new Image(100,25);
pic1.src="http://someplace.com/image1.gif";
}
//-->
</SCRIPT>
There, now you have the code to preload (what a rhyme!). If you want
to do this for multiple images, just be sure to assign them a different
name-- such as pic2, pic3, and so on. Adjust your width, height, and
urls accordingly. You will have two lines for each image. For example,
to preload three images, you would use a code like this:
<SCRIPT language="JavaScript">
<!--
if (document.images)
{
pic1= new Image(100,25);
pic1.src="http://someplace.com/image1.gif";
pic2= new Image(240,55);
pic2.src="http://someplace.com/image2.gif";
pic3= new Image(88,31);
pic3.src="http://someplace.com/image3.gif";
}
//-->
</SCRIPT>
In the next section you will see an example of how preloading works with the image rollover script. The first section will use
browser detection, while the following sections will use object detection like we did here.
|
Tutorials 
