Slow JavaScript rollovers in Firefox

Network latency. The images don't appear to be getting pre-loaded, so there is a short time delay for the browser to download, decode, and display the image.

Once downloaded, I noticed no problem with the rollover.

Indeed, one would think that, but I experience latency even after all the images are loaded. Even when I have the files on my own machine. Do you think there's something wrong with my image pre-loading code?

All I can say is "works for me"... sorry I can't be more helpful than that.

What version of Firefox are you running?

Firefox 1.0, on a P4 1.7 ghz, 1gb of ram, ATI Rage 128 Pro

All I can say is "works for me"... sorry I can't be more helpful than that.

Seconded.

3rded

it's also kinda slow on my machine, running firefox 1.0 on windows xp. mind you, i have a relatively slow machine, a p3/500. not sure what it could be though... maybe the size of the images (400 x 450) plus all the transparent pixels in them? hmm.

Firefox 1.0 on Windows 98 here, running on an Athlon 900MHz with 512 MB RAM. The first rollover for each image took a moment - say a quarter-second - due to the network latency and lack of pre-loading that misch pointed out. After that, they all seem to work instantly; if I roll my mouse up and down over the text links, I see the three counties flickering back and forth quickly enough to look like some kind of strobe effect.

Thanks for checking it out everybody. I guess I'm glad it works for most of you. So far I've tried it on three different machines and seen the lag, but not with others. I'm guessing it's not a general Firefox problem, but something unique to these systems. I'll post if I ever figure it out.

Thanks again.

Well, I found that the problem didn't scale up when I added way more images IF I toggled style.visibility instead of the src. I guess I'll just have to live with the strangely sluggish performance of my own setup.

It looked at you source code and it seems you're using CSS and Javascript to put one image over another. This technique sometimes slows up the rollover effect, especially if the images are large in size. You're basically asking the webbrowser to possibly even reload the california map and the image over it, and then the refresh rate may slow it down even further since in each rollover the images have to be re-rendered by the graphics card. On many computers, this wouldn't be a big deal; especially if the images were in the cache (which happens when the images are loaded for the first time in the web page)

I would recommend slicing up the image in Fireworks or Photoshop and doing a simple rollover to replace the parts of the image that change. This should make it come in much faster.

I liked your image superimposing technique, which sometimes works nicely for small images. Obviously you've seen problems, so I recommend slicing up the image.

Does this help?

I figured I would avoid the problem of constantly reloading images by preloading them with the JavaScript, but I guess that only works sometimes. I considered slicing up the image, but the counties are too irregularly shaped to make that work. Any given rectilinear slice would always include more than just the target county. But thanks for the suggestions.

Preloading is good of course.

Yes a rectilinear slice would contain slightly more than you need, but it's better than the alternative, as you saw. Try it and you'll probably see it's not too bad.

The slow speed before must be caused by re-rendering, since your images are not that large.