Question

我有两个gif动画（每个约100KB）和两个单选按钮，想要更改动画点击它们

<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

更新，基于来自OP的反馈：

我在OS X上运行最新版本的Firefox，Chrome和Safari，除非我点击jsfiddle上的“（Frozen）Gif”按钮，Gifs才会为我冻结，所以这个出现成为OP的本地化故障。

一个可能的原因是浏览器有时会在计算繁忙的情况下跳过Gif动画。例如。许多选项卡是打开的，或者页面上的其他地方运行效率低下的JS。

原始回答：

希望我能理解你正在寻找什么 - 你想：

显示1个gif和2个单选按钮
单击单选按钮以切换显示的Gif
并且，“冻结”Gif动画的能力？

如果这不正确，请告诉我。：）

您给出的代码已经为我做了（1）和（2）。我认为没有任何真正的方法可以通过Javascript冻结Gif，但你可以使用此处描述的方法（Stopping GIF Animation Programmatically）

我创建了a JSFiddle here：

单选按钮2＆amp; 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 ... }

编辑：我应该补充一点，IE8不支持Gif-freeze技巧

切换gif动画的来源

1 个答案: