Issue with menu hover images delay
I have a simple CSS menu with two images, one image is the primary display image and the other is the image that is used to give a colour change on hover.
The problem is in a lot of browsers, (Firefox mostly and IE), the hover image delays loading and the image does not appear instantly, leaving the menu a blank white space for about half a second and looks very buggy.
Can I pre-load the images with css or do I need Java-script and if I do can I just pre-load the images with JS, then leave the rest to css?
It's fairly common to just combine the two images into one image, hide the active part with overflow: hidden; and defined dimensions: then on hover, move the image so the active part shows.
I can make an example if you want more clarification?
Thanks I know what you mean, it sounds like a good way to do it.
In the meantime (before I read your reply)I have used another method where you load them in a far corner as width 1px height 1px then hide them with css.
Not my preferred method, but seems to work for now.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)