Question

我有以下代码来＆＃34;冻结＆＃34;一个gif在5秒内，但是一旦window.onLoad事件被触发，gif就会停止：

$ touch file_1_2.txt
$ ls file*
file_1_2.txt
$ rename 'y/_/\./' file_1_2.txt
$ ls file*
file.1.2.txt

在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的问题在于window.load内部的所有javascript代码已经存在，所以你不能真正使用它两次，但这里面的内容是相同的：

＆＃13;

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);
}

＆＃13;

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

＆＃13;

我在setTimeout函数中移动了第一行（即冻结所有gif图像）。

在5秒内停止动画gif

1 个答案: