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.
How can I fix this without Javascript?
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.
The problem is, as you suspect, that the browser hasn't loaded the second image until the user actually hovers over the link. You could use CSS sprites, which is a very useful method of speeding up page loading and solves this problem. But until you learn a bit more, I'd suggest simply using JavaScript to preload the images you have. A Google search should show you plenty of examples.
Reply With Quote
Bookmarks