Переключения источника GIF анимации

Question

У меня есть два GIF-анимации (около 100Кба каждого) и две кнопки радио, и хочу изменить анимацию, нажав их

<input type="radio" name="anima" onclick="document.getElementById('imgC').src='img01.gif';"/> 
<input type="radio" name="anima" onclick="document.getElementById('imgC').src='img02.gif';"/> 

анимация меняется, но очень часто - не анимированная , но в статическом состоянии. Я должен снова щелкнуть соответствующее радио (хотя оно уже отмечено), чтобы начать анимацию.

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

Answer 1

UPDATE, на основе обратной связи OP:

Я бегу до современных версий Firefox, Chrome и Safari на OS X и ГИФС никогда не замерзают для меня, если я не нажать " (Frozen) Gif "на jsfiddle, так что это похоже на локализованный сбой для OP.

Одна из возможных причин заключается в том, что браузеры иногда пропускают анимацию Gif изначально, если они очень вычислительно заняты. много вкладок открыты, или неэффективная JS работает в другом месте на странице.

---

ОРИГИНАЛЬНЫЙ ОТВЕТ:

Надеюсь, я понять, что вы ищете правильно - вы хотели бы:

1. Чтобы показать 1 GIF и 2 радио кнопки
2. Для нажатия переключатели, чтобы переключить отображение Gif
3. И, возможность «заморозить» анимацию Gif?

Если это неверно, дайте мне знать. :)

Код, который вы указали, уже имеет (1) и (2) для меня. Я не думаю, что есть реальный способ заморозить Gif через Javascript, но вы можете вид взломать его вместе, используя метод, описанный здесь (Stopping GIF Animation Programmatically)

я создал a JSFiddle here:

кнопки Radio 2 & 3 будет замените Gif, а переключатель 1 заменит gif замороженным факсимилем. Чтобы «разморозить» gif, вам, к сожалению, нужно полностью воссоздать элемент <img src="...">.

HTML:

<label><input type="radio" name="anima" onclick="freeze_gif(document.getElementById('imgC'))"/>(Frozen) Gif</label> 

<label><input type="radio" name="anima" onclick="create_gif_1(document.getElementById('imgC'));" checked/>Gif 1</label> 

<label><input type="radio" name="anima" onclick="create_gif_2(document.getElementById('imgC'));"/>Gif 2</label> 
<br> 
<img id='imgC' src='http://25.media.tumblr.com/tumblr_m5kv2t19Mm1rqk3zwo1_400.gif'> 

JS:

function freeze_gif(i) { 
    var c = document.createElement('canvas'); 
    var w = c.width = i.width; 
    var h = c.height = i.height; 
    c.getContext('2d').drawImage(i, 0, 0, w, h); 
    try { 
     i.src = c.toDataURL("image/gif"); // if possible, retain all css aspects 
    } catch(e) { // cross-domain -- mimic original with all its tag attributes 
     for (var j = 0, a; a = i.attributes[j]; j++) 
      c.setAttribute(a.name, a.value); 
     i.parentNode.replaceChild(c, i); 
    } 
} 

function create_gif_1(i) { 
    var img = document.createElement("img"); 
    img.src = 'http://25.media.tumblr.com/tumblr_m5kv2t19Mm1rqk3zwo1_400.gif'; 
    i.parentNode.replaceChild(img, i); 
    img.id = i.id; 
} 

//function create_gif_2(i) { ... same ... } 

EDIT: Я хотел бы добавить, что трюк Gif-замораживание не поддерживается IE8