1

我有两个 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';"/>

动画会经常更改 - 不是动画，而是处于静态状态。我必须再次单击相应的收音机（尽管已选中）才能开始制作动画。

这尤其经常使用第二个按钮/动画（可能是因为默认情况下第一个动画在屏幕上，即通过加载页面。）。

4

1 回答 1

1

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

我在 OS X 上运行最新版本的 Firefox、Chrome 和 Safari，除非我单击 jsfiddle 上的“(Frozen) Gif”按钮，否则 Gif 不会冻结，所以这似乎是一个OP 的局部故障。

一个可能的原因是，如果浏览器的计算量非常大，有时浏览器最初会跳过动画 Gif。例如，打开了许多选项卡，或者在页面的其他地方运行效率低下的 JS。

原始答案：

希望我能正确理解您正在寻找的内容 - 您希望：

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

如果那不正确，请告诉我。:)

您给出的代码已经为我做了（1）和（2）。我认为没有任何真正的方法可以通过 Javascript 冻结 Gif，但是您可以使用此处描述的方法将其组合在一起（以编程方式停止 GIF 动画）

我在这里创建了一个 JSFiddle：

单选按钮 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 ... }

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

于 2013-06-02T05:27:29.830 回答