Restarting animated Gif

I want to put a timer onto my gallery rotation script. This timer is a circular animated gif. i want it to start again when a new image loads..

I would have thought that this would work but apparently not.

// Loader needs to be a Global
loader = new Image();
loader.id = "loader_graphic";
loader.src = "images/loader.gif";
var $container = $('#slider .imgs').cycle({ 
 fx:     'scrollHorz', 
 speed: 1000,
 timeout: 5000,
 before : function() {
  resetLoader();
 }
});

function resetLoader() {
 $("#loader_graphic").remove();
 $("#loader").append(loader);
}

Does anyone have any ideas on fixing this. If this cannot work, does anyone know how t开发者_如何学编程o achieve this effect?

Your javascript code doesn't recreate the variable when resetting, perhaps setting the variable to a newly created dom element would work?

// Loader needs to be a Global
var loader = newLoaderImage();

var $container = $('#slider .imgs').cycle({ 
  fx:     'scrollHorz', 
  speed: 1000,
  timeout: 5000,
  before : function() {
    resetLoader();
  }
});

function newLoaderImage() {
  i = new Image();
  i.id = "loader_graphic";
  i.src = "images/loader.gif";
  return i;
}

function resetLoader() {
  $("#loader_graphic").remove(); // or loader.remove();
  loader = newLoaderImage();
  $("#loader").append(loader);
}

Maybe you can use a workaround with JavaScript but restarting is an option for a gif image, it would be simpler to modify it (with gimp eg.).

One approach might be to use two images: one animated gif, and a static gif that shows the "stopped" frame of the animation.

Position them in the same place. When the image is loading, you show the animated gif (probably using visibility:visible; and hide the stopped one, using visibility: hidden;. When you need the animation to stop, hide the animated gif, and show the stopped image.