javascript - 在javascript中暂停GIF

Question

背景:尝试制作一个 GIF 暂停按钮，跨浏览器

初始实现(适用于 Chrome/Safari):将 gif 绘制到 Canvas 并正确显示 Canvas 会“暂停”gif。但在 FF 和 IE 中，它不起作用(FF - 它只显示第一帧，IE - 即使使用 excanvas 显示 gif 仍然是动画而不是帧)

什么是在FF和IE中暂停GIF？在FF和IE中选中窗口按ESC键在当前显示页面暂停GIF图片

那么我想做什么？所以对于 FF 和 IE，我尝试实现触发 ESC 按键的东西......我做到了......它成功地触发了 ESC 按键...但它不会暂停 GIF。

我想做的就是在 Firefox 和 IE 中模拟转义键。

我尝试过的

// defined before the script that calls it
jQuery.fn.simulateKeyPress = function(keyCode) {
  // Internally calls jQuery.event.trigger
  // with arguments (Event, data, elem). That last arguments is very important!
jQuery(this).trigger({ type: 'keypress', which: keyCode, keyCode: keyCode });
};
// Simulate the key press, in something called onclick of a button element
$(document).simulateKeyPress(27);

不要就上面的这段代码给我建议，因为我复制了相关的代码片段并且我 10000000% 确定它可以工作，因为我将一个警报绑定(bind)到 esc 被按下并且在单击触发 simulateKeyPress() 调用的按钮时出现。发布它只是为了表明我已经尝试过了。

所以基本上，关于暂停 GIF，模拟 ESC 不会像在 FF 和 IE 中按 ESC 那样执行 - 即，按 ESC 会在 ff 和 ie 中暂停 gif，并触发 keypress(也尝试过 keydown)事件 27 (这是 ESC)不这样做。为什么？有任何解决方法吗？？？

Answer 1

将 gif 的帧转换为 sprite 图像，并将它们设置为背景图像，通过使用 javascript 更改 div 的背景位置来循环遍历它们。 在您选择的任何事件上中断间隔计时器将是一件简单的事情。