Start GIF On Mouse Hover and Pause Otherwise?

Question

So I'm trying to have these images on the sidebar of a page I'm building that are static but when you mouseover they animate as gifs. My current setup is to have the background-image css property image be a static jpg normally but change to an animated gif on mouseover. Here's the code, to illustrate my point better.

CSS:

#segments li a.fnb {
background-image: url(http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/fnb%21-small.jpg); /*fallback*/
}

#segments li a.whhu {
background-image: url(http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/still.jpg);
}

#segments li a.fnb:hover {
background-image: url(http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/549933.gif);
}

#segments li a.whhu:hover {
background-image: url(http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/549841.gif);
}

I'll spare you from the rest, it's unnecessary to make my point.

HTML:

<ul id="segments">
    <li><a href="http://collabprojekt.com/tagged/fnb!" class="fnb"></a></li>
    <li><a href="http://collabprojekt.com/tagged/whhu" class="whhu"></a></li>
</ul>

The site is http://tcptest.tumblr.com, check out the left side bar with the images to see how it works currently.

This works, but my only problem is that for the first hover ever, it has to load the gif and this cause a short moment where the box goes blank while it loads the gif. While this isn't a huge deal, it looks really unprofessional.

I tried this idea (link) of using JS, but it failed me.

So I guess my question is: is there a better way to do this with CSS or even any other language so that I don't get this random blank moment?

Answer 1

What you want to learn is how to pre-load images. A Google search for "HTML preload images" will get you going...

This link seems to have a good idea using javascript.

http://www.htmlgoodies.com/tutorials/web_graphics/article.php/3480001/So-You-Want-To-Pre-Load-Huh.htm

Answer 2

You could include the images in IMG elements elsewhere on the page and have them in a hidden container (display:none or visibility:hidden in the CSS) so they are loaded when the page first loads, but not visible. This should serve to cache the hovered image client side so you don't get the delay when the browser requests the :hover image referenced in the CSS.

I would be inclined to use the same file path in the IMG SRC attribute that you use in the CSS to ensure the browser sees it as the same image.

That's if the JavaScript solution isn't working for you.

From your example above...

<!-- Cache Images -->
<div style="display:none">
<img src="http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/549933.gif" alt="">
<img src="http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/549841.gif" alt="">
</div>

EDIT:

There is an additional problem with animated GIFs that might affect you, depending on the animation... Regardless of whether the animated (hover) image is preloaded or not, once it is loaded, browsers tend to play the image in the background regardless of whether it is currently displayed or not. So, moving off the image and back over it again results in the animation 'jumping' to its current position, rather than continuing from where the animation had got to when you moved off the image. More noticeable with long animations rather than short ones.

Answer 3

You can add a DIV to your page that is hidden (display: none) via CSS and put IMG tags for the animated gifs in there. This will force the images to preload with the page.

Check this link for more details.