Preloading and Swapability

 

Introduction.  As everyone experiences, image loading times can be quite disruptive of your web pleasure.  This is even more important to the actualization of rollover effects where images are swapped.  If the loading time for an image takes too long the whole rollover effect is really lost.  One of the major ways to deal with this is to make sure that your images are preloaded or loaded at the time the page is first loaded.

Remember, the image you are using in the page will be loaded when the page is downloaded, you only need to make sure the alternate image(s) are preloaded.

In the following table I have two images that I want you to copy into an images subfolder and then upload into the images subfolder on your web.

 

Image Name Image
SilverGold.jpg

SilverGoldR.jpg

 

Obviously, the more memory your images require and the larger the number of rollovers you have on each page are going to impact the importance of preloading.

The code for the program is in the following table and should be called RolloverYinYang.html.

 

<html>
<head>
<title>Gold/Silver YinYang Rollover</title>

<script language="JavaScript">

var MyImage = new Image();
var MyImage = "images/SilverGoldR.jpg";

</script>
</head>

<body bgcolor = "000000">
<P><center>

<a href="#"

onMouseOver="window.document.MyImage.src='images/SilverGoldR.jpg';"
onMouseOut="window.document.MyImage.src='images/SilverGold.jpg';"
onClick="return false;">
<img src="images/SilverGold.jpg" name="MyImage" border="0"></a>

</center>
</P>
</body>
</html>

 

Notice that only the SilverGoldR.jpg is preloaded.

You should upload these images and the file and then access them through a browser.

More On Browser Detection.  We have already done some coding relating to browser detection and determination.  This can be important when using rollovers since some browsers don't support current enough JavaScript to get them to work.  We could develop more code to get into issues of which browsers and which versions of these browsers support rollovers or image swaps, but this can get very involved.  The key issue we need to test for is whether the browser knows what 

window.document.images

means.  If you look for this in a browser that doesn't have it, the browser will return false.  If the browser has it then it will return true.  This is the basis for the code in the following modification of our previous program called SwapableYinYang.html.

 

<html>
<head>
<title>Gold/Silver YinYang Rollover</title>

<script language="JavaScript">

if (window.document.images)

{

var MyImage = new Image();
var MyImage = "images/SilverGoldR.jpg";

}

</script>
</head>

<body bgcolor = "000000">
<P><center>

<a href="#"

onMouseOver="if (window.document.images) {window.document.MyImage.src='images/SilverGoldR.jpg';}"
onMouseOut="if (window.document.images) {window.document.MyImage.src='images/SilverGold.jpg';}"
onClick="return false;">
<img src="images/SilverGold.jpg" name="MyImage" border="0"></a>

</center>
</P>
</body>
</html>

 

Notice how we actually have a little JavaScript program in each of our events using the If - Then clauses and the { }.