Sprite and single loop animation

Hi there,
I am trying to dodge using flash but I can not find a clever way to accomplish this.
Ideally I would like to use the sprite to eliminate amount of images but I think it may be a catch 22. Animated image needs to be a single loop BUT if it is a sprite then a whole image would load and animation would play onload and only 1 time…before even being repositioned/shown by a:hover.

The only other option I can think of is slicing into multiple images and using css for image replacement. Now, I been out of css game for a while…are people still using a JS ‘preloaders’ to dodge the initial lag and possibly missing that 1-2 sec of animation all together?..if so anything you can suggest?

Thanks for your time.

Yes that’s a good idea Erik and the delay wouldn’t really be noticed :slight_smile:

Hi,

I don’t think you can pre-load a run once animated gif because it will be complete before you can show it.

If the image is applied to any background element it will already have run before you hover it (assuming it has had time to load of course). When you then hover it will be finished. It seems that you can only show animated gifs on hover for them to work each time you hover. If you apply them as a background image first then the hover never plays them again (tested in Firefox only).

I have no experience with javascript pre-loaders so I don’t know if they would also cause the animation to already have run before being shown.

If you preload an image then it will load the image and thus the animation will take effect (99% sure) :slight_smile:

Picking up where Paul was. :slight_smile:

You have one more option; Have the first page-image of the animation applied in the background. Then load the animation during hover. That would avoid the experience of the first loading-time and the animation would show every time.

Of course the animation can’t be a sprite, but the first image of that animation could well be a part of one sprite for all the animations.

Code says it better:


#nav li{
	list-style:none;
	float:left;
}
#nav a{
	float:left;
	border:2px outset #ccc;
	width:60px;
	height:60px;
	background:url(not-animated.gif);
}
#nav a:hover{
	background:url(is-animated.gif);
}
<ul id="nav">
	<li><a href="#"></a></li>
	<li><a href="#"></a></li>
	<li><a href="#"></a></li>
</ul>

Thank you gents,
I guess I was trying to ‘push it’ by using a single sprite.
Animation is so slight that I would much rather avoid it but it has been requested. If it was a looped animation then I could have used 1 animated sprite and 1 static sprite but I guess a few sliced images won’t hurt that much.

Thank you again for your advise, appreciated.