Анимация GIF-файлов на веб-странице. Есть ли способ их перезапустить?

Question

У меня есть следующий сценарий:
В определенном разделе моего сайта есть раздел 800x600, на котором есть фоновое изображение и несколько других изображений, наложенных сверху (с использованием position: absolute).При щелчке по одному из этих изображений изображение заменяется анимированным GIF-изображением, чтобы оно выглядело так, как будто что-то произошло.Эти анимации обычно запускаются один раз (без зацикливания).
После предварительно заданной «продолжительности анимации» анимированный GIF-файл возвращается к исходному статическому изображению.

Это все работает нормально, за исключением того, что у меня нетспособ узнать, сколько времени потребуется для загрузки анимированного GIF-файла, что дает возможность щелкнуть элемент и ничего не происходит в течение всей анимации.
Решение этой проблемы достаточно простое: Предварительная загрузкаизображения.И действительно, я использую PxLoader для предварительной загрузки всех нужных мне изображений.

Однако в некоторых браузерах это создает новую проблему: анимация воспроизводится один раз и никогда больше не воспроизводится.В Firefox кажется, что он работает правильно (вы нажимаете, анимация воспроизводится. Вы нажимаете снова, анимация воспроизводится снова).Однако в IE он не работает (вы нажимаете, он показывает последний кадр анимации).

Я установил jsFiddle, чтобы продемонстрировать мою проблему: jsfiddle.net /xJveS / 4 /

Какие у меня варианты?Как я могу «сбросить» GIF для воспроизведения снова, когда я покажу его в следующий раз?

Обновление

Я закончил создавать свои собственные (очень простые) предКласс загрузчика для замены PxLoader для анимированных GIF-файлов, и он не страдает от этой проблемы.Гифки хорошо воспроизводятся, когда я нажимаю на них.Что означает, что вся моя проблема связана с PxLoader.На данный момент моя проблема «решена» с помощью моего собственного загрузчика, но все еще существует проблема с PxLoader, которая требует решения.

Answer 1

Почему бы не загрузить GIF в скрытый элемент div, а затем, когда вам это нужно, добавить тег для него в нужном месте. Браузер кэширует его с первого запроса, поэтому он должен отображаться сразу.

Answer 2

AFAIK, нет способа перезапустить .gif из JavaScript.

Вы должны быть в состоянии перезагрузить его, установив src на то же самое со строкой запроса в конце. (извините, я использую jQuery для экономии времени, смеется)

$('#myImg').attr('src', $('#myImg').attr('src') + '?' + (new Date()).valueOf());

Недостатком является то, что заставит GIF загружать снова, прежде чем он перезапускается. Итак, следующее, что вы хотели бы сделать, это реализовать какой-то предварительный загрузчик для предварительной загрузки заменяющего gif из нового src.

var rplImg;
function preloadReplacement() {
 rplImg = new Image();
 var d = new Date();
 rplImg.src = "some.gif?" + d.valueOf();
}
$(function()  {
  preloadReplacement();
  $('#myImg').click(function(){ 
      $(this).attr('src', rplImg.src);
      preloadReplacement();
  });
});

Это не проверено , но это основная идея.