Как остановить анимированный gif от цикла

Ответ 1

Не уверен, что это лучший способ ответить всем, и он появляется после всех предыдущих ответов и комментариев, но, похоже, он работает.

У меня нет большого контроля над gif. Люди публикуют любые gif, которые они хотят, в качестве "thankyou.gif" в своей учетной записи, а затем код "ThankYou" запускает все, что они там помещают, когда комментарий отправляется в форму, которую они размещают.Таким образом, некоторые могут зацикливаться, некоторые могут, некоторые из них могут быть короткими, некоторые могут быть длинными. Решение, к которому я пришел, - это рассказать людям, чтобы они делали им 5 секунд, потому что когда я собираюсь их погасить, и мне все равно, будут ли они петли или нет.

Спасибо за все идеи.

Ответ 2

Вы можете узнать, как долго gif берет цикл? если это так, вы можете остановить изображение следующим образом:

псевдокод:

wait until the end of the image (when it is about to loop)
create a canvas element that has a static version of the gif as currently displayed drawn on it
hide gif
display canvas element in a way that makes it look like the gif froze

JavaScript:

var c = $("canvas")[0];
var w = c.width;
var h = c.height;
var img = $("img")[0];
setTimeout(function () {
    c.getContext('2d').drawImage(img, 0, 0, w, h);
    $(img).hide();
    $(c).show();
},10000);

jsfiddle

изменить Я забыл добавить ссылку на оригинальный ответ, который я взял, извините

Автоматическая остановка анимации GIF

что не учитывается фактор времени, который вам нужен только для одного цикла

Также было упомянуто, что в некоторых случаях этот подход является пробным (на самом деле это не сработало, когда я попробовал его в firefox прямо сейчас...). так вот несколько альтернатив:

• упомянутый Марк: отредактируйте сам gif, чтобы избежать цикла. это лучший вариант, если можно. но я столкнулся с ситуациями, когда это не было возможным (например, автоматическая генерация изображений третьей стороной).

• вместо рендеринга статического изображения с холстом сохранить версию статического изображения и переключиться на остановку цикла. это, вероятно, большинство проблем, как холст вещь

Ответ 3

Основываясь на этом ответе, это дорого, но это работает. Пусть говорят, что один цикл занимает 2 секунды. В setTimeout через 2 секунды нажмите в setInterval, который будет reset источником изображения каждые миллисекунды:

setTimeout(function() {
    setInterval(function() {
        $('#img1').attr('src',$('#img1').attr('src'))
    },1)
}, 2000)

снова, возможно, просто доказательство концепции, но здесь демо: http://jsfiddle.net/MEaWP/2/

Ответ 4

На самом деле можно сделать gif для остановки после одной итерации или любого определенного количества итераций, см. пример ниже (если он еще не остановлен) или в jsfiddle.

Для этого необходимо создать gif с указанием количества итераций. Это можно сделать, используя Screen to Gif, он позволяет открывать gif или кучу изображений и редактировать их по кадру.

Это решение также позволяет reset анимацию imgElem.src = imgElem.src;, но это не работает в MS IE/Edge.