Every now and then I run into a situation where using an animated GIF actually makes sense. In this case, I needed to synchronize the GIF with the end of a RaphaelJS animation (more details on that here.). 

You should be able to create a non-looping .gif and use a standard jQuery image onload technique as follows to ensure the gif had been completely loaded before animating (simply binding the “load” event to an image will not trigger in all browsers if the image has been cached):

var logo = “images/logo-animated.gif”;
$(“<img />”).one(‘load’,function(){ 
$(this).remove();
mySVG.animate(attributes,speed,function(){ 
//animation callback
$(‘img#logo’).attr(‘src’,logo);
}
}).attr(‘src’,logo).each(function(){
if(this.complete) $(this).trigger(‘load’);
}); 

This works on all browsers EXCEPT Firefox (or other Mozilla-based). Because Firefox tracks the animation of a .gif based on the asset name (the actual file name) instead of the DOM element, it will only loop once for ALL instances of that image. Because we pre-loaded the image it has already begun and possibly finished looping.. making the animation timing unpredictable. 

To solve this, I created a version of the .gif with a delay at the beginning with the same length as the animation and load this image only in Mozilla-based browsers:

var logo = “images/logo-animated.gif”;
var logoDelayed = “images/logo-animated-delayed.gif”;
if($.browser.mozilla) {
$(‘img#logo’).attr(‘src’,logoDelayed+’?ts=’+(new Date()).getTime());
$(‘img#logo’).load(function(){
mySVG.animate(attributes,speed);
}
}else{

 

$(“<img />”).one(‘load’,function(){ 
$(this).remove();
mySVG.animate(attributes,speed,function(){
//animation callback
$(‘img#logo’).attr(‘src’,logo);
}
}).attr(‘src’,logo).each(function(){
if(this.complete) $(this).trigger(‘load’);
}); 

Final Demo

Permalink | Leave a comment  »

Raphaël is a fantastic library for manipulating vector images on the web. Sadly, it does not support importing .svg files, allowing you to work with a standard image format. 

Wout Fierens has written a nice plugin to solve this problem and we went ahead and updated it, removing the dependency on prototype.js. 

See it in action. 

Permalink | Leave a comment  »

Raphaël is a fantastic library for manipulating vector images on the web. Sadly, it does not support importing .svg files, allowing you to work with a standard image format. 

Wout Fierens has written a nice plugin to solve this problem and we went ahead and updated it, removing the dependency on prototype.js. 

See it in action. 

Permalink | Leave a comment  »