?

Log in

No account? Create an account
 

Slow JavaScript rollovers in Firefox - Web Developer

About Slow JavaScript rollovers in Firefox

Previous Entry Slow JavaScript rollovers in Firefox Feb. 2nd, 2005 @ 11:10 am Next Entry
Hi all, I'm new around here. Have you ever run into amazingly slow javascript rollovers in the Windows build of Firefox?  Check out this little test to see what I'm talking about.  Basically there are 4 absolutely positioned gifs on top of each other, with the links to the side set up with onMouseOver events that toggle a given gif's src.  This works just fine in IE 6, Safari, and Mac and Linux builds of Firefox, but in Firefox on Windows it's painfully slow.  Or at least it is on my machine. Others have told me that it looks fine. A version with all the state's counties practically locks up my browser.

Any thoughts?  A known bug, perhaps?  Any better techniques? I've tried toggling style.visibility instead of the src, but to no avail.
Leave a comment
[User Picture Icon]
From:misch
Date:February 2nd, 2005 07:27 pm (UTC)
(Link)
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.
[User Picture Icon]
From:ken_ichi
Date:February 2nd, 2005 07:32 pm (UTC)
(Link)
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?
[User Picture Icon]
From:misch
Date:February 2nd, 2005 07:42 pm (UTC)
(Link)
All I can say is "works for me"... sorry I can't be more helpful than that.

What version of Firefox are you running?
[User Picture Icon]
From:ken_ichi
Date:February 2nd, 2005 09:33 pm (UTC)
(Link)
Firefox 1.0, on a P4 1.7 ghz, 1gb of ram, ATI Rage 128 Pro
[User Picture Icon]
From:jazzmahn
Date:February 2nd, 2005 08:17 pm (UTC)
(Link)
All I can say is "works for me"... sorry I can't be more helpful than that.

Seconded.
From:xiota
Date:February 2nd, 2005 08:49 pm (UTC)
(Link)
3rded
[User Picture Icon]
From:bunnyhero
Date:February 2nd, 2005 08:28 pm (UTC)
(Link)
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.
[User Picture Icon]
From:digitalsidhe
Date:February 2nd, 2005 08:32 pm (UTC)
(Link)
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.

[User Picture Icon]
From:ken_ichi
Date:February 2nd, 2005 09:37 pm (UTC)
(Link)
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.
[User Picture Icon]
From:ken_ichi
Date:February 3rd, 2005 12:54 am (UTC)

Not quite a resolution

(Link)
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.
[User Picture Icon]
From:mage67
Date:February 3rd, 2005 03:44 am (UTC)
(Link)
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?
[User Picture Icon]
From:ken_ichi
Date:February 3rd, 2005 03:55 am (UTC)
(Link)
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.
[User Picture Icon]
From:mage67
Date:February 3rd, 2005 04:02 am (UTC)
(Link)
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.
(Leave a comment)
Top of Page Powered by LiveJournal.com