Menu
I have a relatively simple set of links that change an image and text as you roll over a set of links. Everything is working fine however the image rollover seems to respond very slow – as you roll over the links the text updates instantly however the image can take a few seconds to update. I thought preloading the images would fix this problem but it’s still there.
There are two things I’m worried about:
1) It seems to me that I’m not actually caching the image (only the image url) – when I assign the src element isn’t it still the masthead img’s job to go get the image across the internet? Maybe this works because (we are counting on) the browser to have already cached the image data? I don’t really understand how this works.
2) My images are being generated dynamically by the server (../images/Image.X.aspx) – this page returns the appropriate image outta the database and sets the correct image size. Can images generated by the server be cached? If not this might be counteracting the benefit of preloading the images and causing my problem?
Example code follows:
[CODE]var imageCount=12;
var oImages = new Array();
function PreloadImages()
{
for (i=1; i <= imageCount; i++)
{
oImages[i] = new Image();
oImages[i].src = “../images/Image.” + i + “.aspx”;
}
preloadComplete = true;
}
function showImage(SelectedIndex)
{
if (preloadComplete == true )
{
// change masthead image
var oMastheadImage = document.getElementById(‘MastheadImage’);
oMastheadImage.src = oImages[SelectedIndex].src;
oMastheadImage.alt = GetTitleText(SelectedIndex);
/* change masthead text */
var oMastheadText = document.getElementById(‘MastheadText’);
oMastheadText.innerHTML = GetTitleText(SelectedIndex);
}
}
Here is an example of some of my links:
<a onmouseover=”showImage(1); return true;” href=’Link1.aspx’>Link 1</a>
<a onmouseover=”showImage(2); return true;” href=’Link2.aspx’>Link 2</a>
Thanks in advance for your help,
J. Shane Kunkle
[email][email protected]