У меня есть анимированный gif в теге img, который я начинаю с переписывания атрибута src. Гиф был создан, однако, для цикла, и я только хочу, чтобы он играл один раз. Есть ли способ, с Javascript или jQuery, остановить анимацию gif от игры более одного раза?
Как остановить анимированный 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);
изменить Я забыл добавить ссылку на оригинальный ответ, который я взял, извините
Автоматическая остановка анимации 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.