Как определить, полностью ли анимирован gif с помощью jquery - PullRequest
Новая
       1

Как определить, полностью ли анимирован gif с помощью jquery

2 голосов
/ 16 февраля 2012

Если у меня есть анимированный GIF, который запускает только одну анимацию, IE.он не зацикливается, есть ли способ использовать jquery или что-то в этом роде, чтобы сообщить, когда анимация завершена?Я не хочу сообщать, загружен ли файл полностью, но анимация прошла.

Ответы [ 3 ]

4 голосов
/ 16 февраля 2012

Я думаю, что нет способа обнаружить это из JavaScript. Я бы выбрал другое решение.

Создание статического изображения (может быть в любом формате, JPEG, PNG, GIF), в котором кадры исходной анимации находятся под каждым Другой. Как это: 

┌───┐
│ 1 │
├───┤
│ 2 │
├───┤
│ 3 │
├───┤
│ 4 │
└───┘

Затем вы можете создать <div/>, например, с размерами фрейма и установить это длинное статическое изображение в качестве фона, а затем перемещать фон через каждые n-е миллисекунды.

Проверенный код 

$(function() {
  var width = 20, height = 20, frames = 3;

  var $div = $(document.createElement('div'))
    .css({
      backgroundImage: 'url(test.png)',
      width:  width + 'px',
      height: height + 'px'
    })
    .appendTo(document.body);

  var frame = 0;
  setInterval(function () {
    frame++;

    if (frame > frames) { frame = 0; }
    $div.css('background-position', '0 ' + -1 * frame * height + 'px');
  }, 250);
});

Обновление

Google сделал то же самое с кнопками +1, но они сделали это по горизонтали, а не по вертикали, как в предыдущем примере: отметьте здесь .

3 голосов
/ 16 февраля 2012

Вы не можете. GIF-файлы не имеют обработчиков событий.

2 голосов
/ 16 февраля 2012

Ответ сложный, но он действительно возможен, однако вам потребуется серверный язык, такой как PHP (если только вы не знаете, что GIF всегда будет одинаковым и будет иметь одинаковую известную продолжительность).

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

Затем можно определить продолжительность анимации (No. of frames x FPS).Используя jQuery, предварительно загрузите GIF и, когда он будет полностью загружен, отобразите его, а затем дождитесь, пока продолжится его анимация.

...