| <<< Home | << Web | < Rollovers | Top | Bottom | < Prev | Next > |
You can use these links to scroll to individual topics
Why do you preload images?
How do you preload images?
The preloadImg function
Which images do you preload?
When you code an image rollover, you specify an image that is to replace the former image when the mouse moves over it. You want this replacement to appear to be instantaneous. For this to happen, you have to preload the image so that the browser can immediately substitute it. If you don't preload it, the browser has to download it from your host when it is needed, and there will be a very noticeable delay before the rollover image replaces the original.
To preload an image, you create an image object for the image you're preloading. You need to create a name for this object. Any unique name will do, except that you have to be sure to avoid using a name that is a javascript reserved word.
I like to use names that begin with the characters "gm". That's just my personal convention, and whenever I see a name that begins with "gm" anywhere in my code I know that one of these image objects is being referred to. I'll be using this convention here, but you're free to follow whatever convention you like in assigning names.
You can use the following code to preload two images:
<script language="javascript" type="text/javascript"> <!--
if (document.images) {
gmSkin04 = new Image();
gmSkin04.src = "skin04.jpg";
gmSkin04n = new Image();
gmSkin04n.src = "skin04n.jpg";
}
//--> </script>
Text in bold indicates text that must be entered exactly as shown. Text that is not bold represents names that you assign.
Javascript is case-sensitive. Make sure you have the case exactly as shown for the bold elements. In your own assigned names, make sure you have the same case in all references to a variable.
Let's look at this a little at a time. We begin and end with:
<script language="javascript" type="text/javascript"> <!-- //--> </script>
<script> is an HTML tag that defines the beginning of a script. </script> ends the script. language=javascript indicates that the script is in the JavaScript language, as opposed to VBScript or any other scripting languages that might show up some day. type="text/javascript" also indicates that this is javascript. language is needed for older browsers, and type is required by the HTML 4.0 standard, so include both.
The <!-- and //--> are comments that hide the javascript code from browers that don't support javascript. If you're coding for XHTML, you might want to omit these: XHTML doesn't allow the comments to be used that way. I don't imagine that very many people are still using browsers that don't recognize <script>, and the worst that happens to those people is that your script may be displayed on the page. Your page should still be usable.
if (document.images) {
gmSkin04 = new Image();
gmSkin04.src = "skin04.jpg";
gmSkin04n = new Image();
gmSkin04n.src = "skin04n.jpg";
}
if (document.images) { ... } executes the statements between the braces only if the condition "document.images" evaluates to true. "document.images" is true if the browser supports image objects, but it evaluates to false if the browser is a browser such as IE 3 that does not support image objects and cannot do rollovers. The if statement prevents a browser such as IE 3 from displaying an alert message.
variable = new Image(); creates a new image object. You pick the name. Oh, and be careful - Image has to begin with a capital I or it won't work!
variable.src = "url" specifies the image's URL, and causes the browser to preload the image. Specify the URL just as you would in an <img src="url"> HTML tag. You can use relative URLs (eg., "xxx.gif" or "images/xxx.gif") or absolute URLs (eg., "http://xxx.yyy.com/somewhere/xxx.gif").
I find that it is handy to define a JavaScript function that creates an image object and sets the URL. This is especially nice when you need to preload a number of images. If you want to do it this way, use the following code instead of the above code. All of the examples on the following pages use the preloadImg() function.
<script language="javascript" type="text/javascript"> <!--
//====================================================
// preloadImg() - Preloads an image
//
// Argument: String containing URL of image to preload
// Returns: Image object created for the image
// Author: Larry Coats
//====================================================
function preloadImg (zsUrl)
{
// Prevent alerts in IE 3 and Netscape 2
if (!document.images) return null;
// Create an image object and preload the image
var xo = new Image(); // Create the image object
xo.src = zsUrl; // Set URL - Preloads
return xo; // Return the image object
}
//====================================================
// Preload the images
//====================================================
var gmSkin04 = preloadImg ("images/skin04.jpg");
var gmSkin04n = preloadImg ("images/skin04n.jpg");
//--> </script>
This code accomplishes exactly the same thing as the earlier code. It's just a little shorter, especially when you're preloading a lot of images.
If you view the source for these pages, you'll see that I use my preloadImg() function to preload the images. But you won't see the code that defines the preloadImg() function. That's because I have put that function inside my maina.js file that I include in all of my pages. I'll explain about .js files later.
Images that appear in <img> tags or in background attributes or as background properties in style sheets do not have to be preloaded since the browser will automatically download those as part of the process of downloading the page. However, the method I'm using for rollovers requires that you define an image object for any image that will substitute for another one. The image object is created as part of the preload process, so you'll have to preload any image that participates in a rollover.
For example, if your <img> specifies one image and you use an onmouseover to swap to an alternate image when the mouse moves over the image, you have to preload that image because (1) the image wouldn't otherwise be immediately available and (2) you need the image object in order to do the swap.
If you also include an onmouseout to swap the image back, you also have to preload the original image. This isn't to have the image available (it'll already be there since it's identified in the <img> tag), but because you need the image object in order to swap back.
| <<< Home | << Web | < Rollovers | Top | Bottom | < Prev | Next > |