切換gif動畫的來源

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上的“（凍結）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凍結技巧