tags:

views:

53

answers:

1
Q: 

Sprite background image lags on mouse hover

I have basic DOM menu that has sprite background images for the first level of "LI"s. It works just fine, but I guess there is some problem and instead of switching the image right away on hover it goes blank and after about a second the hover image "appears" (shifts).

That happens only on first hovering. After that it's smooth like it's supposed to be. Refresh the page and there it is again... Frustrating... Here is a link to check it out: http://goo.gl/6FAM

The problem exist on Firefox v3.6.3. Chrome 5.0.375 and IE 8.0.7600 don't have this issue.

Any ideas?

+1  A: 

It's because the hover background image is not loaded until you pass the mouse on the button.

An easy solution is to use CSS sprites, so you will only have 1 image to deal with.

nico  2010-05-26 21:43:33
+1 for CSS sprites.
Shawn Steward  2010-05-26 21:45:40
Well, basically that is what I am doing... there is only one image per LI element that contains both "background image" and "hover background image" - like this: http://goo.gl/oAwt
 2010-05-26 21:58:40
@user351342: hmmm... bizarre... Try this: in the CSS, instead of setting `background` for the `:hover` state, just set `background-position`, as the image name etc are all the same. So just put `background-position:-150px 0px`. With that it seems to load immediatly in FF.
nico  2010-05-26 22:11:33

related questions

Figure out div that is visible out of four divs.
How do I maintain position of a DragPanelExtender across postbacks?
jQuery "after" selector question
What is the best tool to benchmark my JavaScript?
Getting closest element by id
How to show a spinner while loading an image via JavaScript
Binding custom functions to DOM events in prototype?
Are there any tools out there to compare the structure of 2 web pages?
Is there any way to repopulate an Html Select's Options without firing the Change event (using jQuery)?
How do I get the current location of an iframe?
Looking for a simple JavaScript example that updates DOM.
Does Microsoft ASP.NET Ajax Cause DOM Object Leaks?
How do I serialize a DOM to XML text, using JavaScript, in a cross browser way?
Should I use window.onload or script block?
Firefox vs. IE: innerHTML handling
Should DOM splitText and normalise compose to give the identity?
How to Maintain Correct Javascript Event After Using cloneNode(true)
PHP - Determine Parent Node Of DOMElement
DOM manipulation in PHP
Which Java DOM Wrapper is the Best or Most Popular?
Inserting at the very end in FCKeditor
How do I remove a child node in HTML using JavaScript?
Firefox plugin - sockets
Getting the text from a drop-down box
How can I turn a string of HTML into a DOM object in a Firefox extension?