在 5 秒内停止动画 gif

Question

我有以下代码可以在 5 秒内 "freeze" 一个 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 一直停止。你能帮忙吗？

谢谢

编辑 1： 按照正确的建议，我包括一个当前代码的工作示例：

https://jsfiddle.net/rqfdkkgz/

Answer 1

您是运行开头的这一行：

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

它冻结了你所有的图像。

jsfiddle 的问题是所有 javascript 代码都已经在 window.load 中，所以你不能真正使用它两次，但这里有相同的内部代码片段：

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="" >

我将第一行（冻结所有 gif 图像的情况）移到了 setTimeout 函数中。

在 5 秒内停止动画 gif

Stopping an animated gif within 5 seconds

javascript

animated-gif