Перезапуск анимированного GIF

Question

Я хочу установить таймер на мой скрипт поворота галереи. Этот таймер представляет собой круговой анимированный GIF. я хочу, чтобы он начался снова при загрузке нового изображения ..

Я бы подумал, что это сработает, но, видимо, нет.

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

Есть ли у кого-нибудь идеи по исправлению этого. Если это не сработает, кто-нибудь знает, как этого добиться?

Answer 1

Ваш код javascript не воссоздает переменную при сбросе, возможно, установка переменной для вновь созданного элемента dom будет работать?

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

Answer 2

Одним из подходов может быть использование двух изображений: одного анимированного GIF и статического GIF, который показывает «остановленный» кадр анимации.

Расположите их в одном месте. Когда изображение загружается, вы показываете анимированный GIF (возможно, с помощью visibility:visible; и скрываете остановленный, используя visibility: hidden;. Когда вам нужно остановить анимацию, скройте анимированный GIF и покажите остановленное изображение.

Answer 3

Может быть, вы можете использовать обходной путь с JavaScript, но перезапуск является опцией для изображения GIF, было бы проще изменить его (например, с GIMP).