5秒以内にアニメーションGIFを停止

Question

私は5秒以内にGIFを「凍結」するために、次のコードを持っているが、しかし、GIFは、すぐにwindow.onloadイベントが起動されると停止します。

[].slice.apply(document.images).filter(is_gif_image).map(freeze_gif); 

function is_gif_image(i) { 
    return /^(?!data:).*\.gif/i.test(i.src); 
} 

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"); 
    } catch(e) { 
     for (var j = 0, a; a = i.attributes[j]; j++) 
      c.setAttribute(a.name, a.value); 
     i.parentNode.replaceChild(c, i); 
    } 
} 

window.onLoad = function(){ 
    var gifs = freeze_gif(i); 
    setTimeout(function() { 
    gifs[n].click(); 
}, 5000); 
} 

は、それは正しいですwindow.onLoadにsetTimeoutを含めるには？私はfreeze_gif（i）に取り込もうとしましたが、イベントが発生するとGIFは停止し続けます。手伝ってくれますか？

は

EDITありがとう1： として当然、私は現在のコードの作業例を含めています推奨：

https://jsfiddle.net/rqfdkkgz/

Answer 1

あなたは開始時にこの行を実行している：

[].slice.apply(document.images).filter(is_gif_image).map(freeze_gif); 

あなたのすべての画像がフリーズしています。

function is_gif_image(i) { 
 
    return /^(?!data:).*\.gif/i.test(i.src); 
 
} 
 

 
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"); 
 
    } catch(e) { 
 
    for (var j = 0, a; a = i.attributes[j]; j++) 
 
     c.setAttribute(a.name, a.value); 
 
    i.parentNode.replaceChild(c, i); 
 
    } 
 
} 
 

 
window.onload = function() { 
 
    setTimeout(function() { 
 
    [].slice.apply(document.images).filter(is_gif_image).map(freeze_gif); 
 
    }, 5000); 
 
}

<img src="http://rubentd.com/img/banana.gif" alt="" >

：

jsfiddleに問題がありますので、あなたが本当にそれを2回使用することはできませんすでにwindow.load内側であるが、ここでは同じ内部の抜粋であるすべてのJavaScriptコードということですsetTimeout関数の最初の行（すべてのgif画像のフリーズ）を移動しました。