Restarting animated Gif

Question

Hi,

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 to achieve this effect?

Answer 1

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.).

Answer 2

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);
}