html css Gif Animation

Question

I have a .gif playing the animation once. It's doesn't loop and I don't want it to loop.

I have 2 images, ("1 png" and "1 gif animated")

I want that every time when the mouse is over the png image, the gif plays.

My problem is that when I set my mouse positon over the png Image, the gif play one time and stop. When I move the mouse away and then move it back over the image, it doesn't play anymore.

My CSS codes :

#icon{
 float: left;
 width:50px;
 height:50px;
 background: url("images/smal_icon.png") no-repeat scroll 0% 0% transparent;
}
#icon:hover{
float: left;
width:50px;
height:50px;
background: url("images/smal_icon.gif") no-repeat scroll 0% 0% transparent;
}

#icon is a DIV

Because it's set to play only once, what you probably want to do, is append something to the end of `.gif` when you hover over the png, so `.gif?rnd=12334`, this will ensure that the `gif` is re-downloaded and will animate once again. — Nick R, Jun 13 '13 at 11:55
@NickR can you give me an exemple with the code I have (I 've Edit my post and put the codes) — LeSam, Jun 13 '13 at 11:57
use inline GIFs to make for an instant animation and no redownloads. — Willem Mulder, Jun 13 '13 at 12:12

score 7 · Accepted Answer · answered Jun 13 '13 at 12:10

By default, you can't control the GIF's looping or animation. The browser will just play the GIF as is.

So by default, it is impossible to say whén or how long the GIF should play.

There are three solutions:
1. You replace the src of the img with a data:image so you inline the GIF. Whenever the src changes, the GIF will play again. Using the inline GIF instead of a real URL, there's no redownloading of the GIF, so that saves time. See http://www.websiteoptimization.com/speed/tweak/inline-images/ for an example
2. Like said in the comments, and other answers, you can replace the src of the img tag with the same GIF but with an appendum to the URL (like ?someRandomNumber=1345) so that it will redownload the GIF and play it again. Downside is that the GIF will be redownloaded.
3. You use something like http://slbkbs.org/jsgif/ to download the GIF via AJAX, then draw it using a canvas element, and have full control over it...

score 1 · Answer 2 · answered Jun 13 '13 at 12:03

1

You'll need to take the image out of the CSS for this to work, and use img src=

But you could modify this:

// hack for not caching .gifs in ff/chrome etc.
$("img").each( function( ) {
    var src = $(this).attr("src");
    if( /\.gif$/i.test(src)) {
        $(this).attr( "src", src.replace( /\.gif$/, ".gif?rnd=" + Math.floor(Math.random() * 100) + 1));
    }
});

What this does is

loops through all images on a page
checks if it's a .gif changes the
extension to add a random number on the en.

You could turn this into a function and strip out the bits you don't need, so that every time you hover over the png - it will request the .gif image again, because it would have a different number appended to the end of it.

answered Jun 13 '13 at 12:03

Nick R

7,704
2
22
32

You should use `attr()` instead of `prop()` for `src`. `prop()` is used for boolean values. – James Donnelly Jun 13 '13 at 12:04
Thanks you, I hope this ll works, I set it as "resolved" but I can't try it for now... Thanks you anyways – LeSam Jun 13 '13 at 12:08
This is quite inefficient since the GIF needs to be redownloaded every time you want to play it. That costs bandwidth, and it takes time before the image is loaded so your UX is never instant. Better use inline GIFs, see my other answer. – Willem Mulder Jun 13 '13 at 12:11
Related, they used a similar solution - http://stackoverflow.com/a/7669524/2470724 and http://jsfiddle.net/64fZa/5/ – Nick R Jun 13 '13 at 12:12

score 0 · Answer 3 · answered Jun 13 '13 at 11:56

0

Looping is a property of the GIF itself. The best way to do this would be to modify the GIF to allow the animation to endlessly loop. Most image editors which accept GIF animations have a "Loop" option which can be set to true.

Otherwise you can do this in a hacky way with JavaScript by reloading the image or re-firing the hover after a certain timeframe (see window.setInterval).

answered Jun 13 '13 at 11:56

James Donnelly

126,410
34
208
218

@user2372006 in that case you'll need to use JavaScript to detect the `mouseover` event and set the element's background `style` to that image, then detect the `mouseout` event and revert the style back to default. Are you using jQuery at all? – James Donnelly Jun 13 '13 at 12:02

html css Gif Animation

3 Answers3

Linked