You are here: irt.org | Articles | JavaScript | Image | Speeding up image rollovers [ previous next ]
Published on: Friday 6th March 1998 By: Jason Nugent
Nowadays, you would be hard-pressed to find a website out there that does not include some sort of JavaScript roll over script for a link. And why not? They make your page more interactive and can improve navigation around your site by providing your visitors with additional information.
Problem is, as the number of images on your page increases, the load time of the page also increases. And if you follow good advice and preload your images inside the
tag to make sure all the rollovers works from the beginning, visitors could be waiting a long time before they see anything on your page.So, what do you do? If you decide to only load the highlighted images when a link is "rolled-over", your visitor has to wait until the image is downloaded before seeing the new image, but at least that way they get to see the page sooner than if you had put all the preloading information in the <HEAD> tag.
So why not do something a bit more ingenious? While the visitor reading the information on the page when it first loads, you could easily be downloading the highlight images so the links work properly when your guest decides to check them out. To do this, you make use of the onLoad() event handler for the
tag. This event handler is triggered when the body of your document is completely loaded (images and all). It's used like this:<body onLoad='functionName()'>
where functionName() is the name of the function (along with any arguments you want to pass to it) that gets run when the body of your document is completely loaded. To use this function to load the remaining images, just put them inside the function declaration:
function imageLoad() {
if (document.images) {
img1 = new Image(); img1.src = "images/img1off.gif";
img2 = new Image(); img2.src = "images/img2off.gif";
img3 = new Image(); img3.src = "images/img3off.gif";
// and so on until you load them all
}
}and trigger it with
<body onLoad='imageLoad()'>
Note that this function makes use of the document.images array check to ensure that the browser supports the array (and hence also supports mouseOvers). Making your check this way instead of an explicit browser check makes your code more portable and means that you won't need a re-write when a new browser comes along in the future that supports mouseOvers, because your code will already work with it.
There is one line missing with this, however. How does your rollOver function know that the images are initialized? The way it will know is by returning a value that tells your browser that a space has been "reserved" in the document.images array for each image. By using the return statement you can set a flag variable to true and let your rollOver function do its work. This variable is initially set to false when the page first loads but eventually becomes true when the *on* images are initialized.
<script language="JavaScript"><!--
var flag = false;
function imageLoad() { // called with onLoad()
if (document.images) {
img1on = new Image(); img1on.src = "images/img1on.gif";
img2on = new Image(); img2on.src = "images/img2on.gif";
img3on = new Image(); img3on.src = "images/img3on.gif";
// and so on until you load them all
return (flag = true); // set the flag and let the function know know it can work
}
}
if (document.images) { // load the off images in the normal way
img1off = new Image(); img1off.src = "images/img1off.gif";
img2off = new Image(); img2off.src = "images/img2off.gif";
img3off = new Image(); img3off.src = "images/img3off.gif";
}
function rollIn(imgName) {
if (document.images && (flag == true)) {
document[imgName].src = eval(imgName + "on.src");
}
}
function rollOut(imgName) { // the normal onMouseOut function
if (document.images){
document[imgName].src = eval(imgName + "off.src");
}
}
// -->
</script>The rollOut function doesn't have to check for a flag since those images were loaded in the <HEAD> of the document when the page was first loaded.
The code syntax that you use when you define your image that you want to act as a rollOver doesn't change at all from what you have been seeing before:
<a href="page.html" onMouseOver="rollIn('img1');return true" onMouseOut="rollOut('img1');return true;">
<img src="images/img1off.gif" width="100" height="20" border="0" name="img1"></a>As is always the case, the name of the image gets passed to the rollIn() function when the event handler is triggered. If the highlighted state of your image has been loaded, it gets displayed in the normal fashion.
Click here for a working example of the source code.
Macromedia Fireworks Image Map Tutorial