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

Question

У меня есть анимированный gif в теге img, который я начинаю с переписывания атрибута src. Гиф был создан, однако, для цикла, и я только хочу, чтобы он играл один раз. Есть ли способ, с Javascript или jQuery, остановить анимированный gif от игры более одного раза?

Answer 1

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

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

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

Answer 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

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

Stopping GIF Animation Programmatically

, что один не учитывает фактор времени вам нужно только один петли

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

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

2. вместо рендеринга статического изображения с холстом, keep a static image version and switch to stop looping. это probablyhas большинство проблем, как холст вещь

Answer 3

Основываясь на this answer, это своего рода дорого, но это работает. Скажем, один цикл занимает 2 секунды. На SetTimeout через 2 секунды пнуть в setInterval, что бы сбросить источника изображения каждую миллисекунду:

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

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

Answer 4

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

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

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