www.webdeveloper.com
Results 1 to 4 of 4

Thread: Issue with menu hover images delay

  1. #1
    Join Date
    Oct 2012
    Posts
    55

    Issue with menu hover images delay

    Hi

    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?

    Dan

  2. #2
    Join Date
    Jul 2009
    Posts
    184
    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?

  3. #3
    Join Date
    Oct 2012
    Posts
    55
    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.

    Dan

  4. #4
    Join Date
    Mar 2011
    Posts
    1,108
    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.
    Rick Trethewey
    Rainbo Design

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles