Как использовать JS для запуска GIF-анимации?

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

 $('#plus').click(function(){
    $('#plus').attr('src','');
    $('#plus').attr('src','img/plus.gif')
 });

С надеждой, что быстро сбрасывая src вызовет анимацию, но не повезло. Кто-нибудь знает, как это сделать?

6
animated-gif gif javascript jquery

6 ответов

попробуйте добавить изображение со случайно сгенерированной строкой запроса, чтобы оно выглядело как новое изображение в браузере.

<script language="javascript" type="text/javascript">
function randomString() {
    var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
    var string_length = 8;
    var randomstring = '';
    for (var i=0; i<string_length; i++) {
        var rnum = Math.floor(Math.random() * chars.length);
        randomstring += chars.substring(rnum,rnum+1);
    }
    document.randform.randomfield.value = randomstring;
}
$('#plus').click(function(){
    $('#plus').attr('src','img/plus.gif?x=' + randomString())
    });
</script>
8

Это немного другой подход.

вы можете экспортировать отдельные кадры как свои собственные изображения и обрабатывать анимацию с помощью javascript.

Это позволяет вам сделать пару классных вещей. У коллеги недавно была небольшая анимация таймера, которая была синхронизирована с настраиваемым интервалом слайд-шоу в нашей галерее изображений.

другая вещь, которую вы получаете из этого, - вы можете использовать pngs и иметь полупрозрачные фоны.

есть библиотека анимации sprite для javascript где-то там :)

1
function refreshSrc(who){
    return who.src= who.src.split('?')[0]+'?='+(+new Date());
}
refreshSrc(document.images[0])

Tart его с синтаксисом jQuery, если хотите.

1

вы пытались удалить тег img и добавить его обратно? (никогда не пробовал, просто идея)

0

вы можете попробовать иметь однокадровое изображение (первого кадра анимации) и показать/скрыть каждый из них по щелчку. Если вы хотите, чтобы он вернулся к однокадровому изображению, когда анимация будет завершена, вы можете использовать setTimeout (с тем, как долго анимация является длительностью времени) и скрыть анимацию и показать статическое изображение.

0

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

Ссылка для появляются.js:https://github.com/morr/jquery.appear

$('img.large-magnify-glass-animation').appear(function() {
    $(this).delay(200, function(){
        $(this).attr('src','http://example.com/path/to/gif.gif');
    });
});

Я просто загрузил тот же gif через attr('src') на visiblity после короткой задержки. Нет метки времени или случайной функции char. Просто используется плагин appear.

0