动画运行速度较慢，并且如果没有在 chrome 中重新加载页面，则不会重播答案

【问题标题】：Animation runs slower and doesn't replay without page reload in chrome动画运行速度较慢，并且如果没有在 chrome 中重新加载页面，则不会重播
【发布时间】：2013-05-06 14:47:43
【问题描述】：

您好，我正在学习使用easelJS 编写基于浏览器的游戏的教程。教程进展顺利，但我在 chrome 上播放动画时发现了一些问题。

Chrome 运行动画的速度较慢，并且一旦播放完相同的动画就不会再次播放，除非我重新加载页面。

在 Firefox 中运行它没有任何这些问题。

这是链接：（对代码使用检查元素）

http://david.blob.core.windows.net/easeljstutorials/easelJSSpritesTutorial03.html

我听说 chrome 中存在一些缓存问题，所以我认为这可能是问题所在。手动删除缓存实际上可以让动画在不重新加载页面的情况下再次播放，但它仍然运行缓慢（与 firefox 相比）。

由于我想编写跨浏览器兼容性的代码，chrome 中是否有支持的方法来解决这些问题？例如阻止将图像存储在缓存中或其他什么？（我希望这是最后的手段）

提前致谢，

共平

编辑：似乎动画的速度在 ie10 上是一样的，所以不知道你应该知道什么速度。

【问题讨论】：

你的描述听起来像是内存溢出。
看到这个帖子stackoverflow.com/questions/3156837/…
缓存只会影响你改变动画后的外观，不会影响速度！ - 很难说你的问题是什么，不看你的代码
@olsn 谢谢。可以使用浏览器检查元素功能按照我的问题中的链接查看代码。
@SameerH.Ibra 我关注了您的链接，但它似乎与我的相反。我在 Firefox 上的动画似乎比 chrome 和 ie 更快。有没有办法强制浏览器以几乎精确的速度显示动画？

标签： javascript google-chrome animation html5-canvas easeljs

【解决方案1】：

“重置”后这将不起作用的原因是您依赖图像加载事件来启动动画。这将在第一次工作，但第二次，图像已经加载，因此您永远不会从图像中获得 onload 事件（意味着没有“startGame()”。

由于这是一个简单的示例，也许最好的方法是每次都创建新图像。只需将这些行移到您的 init 中即可：

function init() {
    var imgMonsterARun = new Image();
    var imgMonsterAIdle = new Image();
    // Other stuff
}

【讨论】：

我理解您的理由并感谢您的回复。如果是这样
..问题在 ie 和 ff 中不一样吗？在那些浏览器上，当按下开始时，动画会很好地重播吗？还有一种方法可以避免每次都重新创建图像，因为当我继续玩自己的游戏时，我希望它们像 pos 一样高效吗？感谢到目前为止的回复
当然，事实上，以上是不好的做法。我只是指出它失败了，因为 onload 永远不会触发。你的开始按钮应该做其他事情。像 `if (alreadyLoaded) { startGame(); } 其他 { loadImagesThenStartGame(); }
好酷np。如果您更新答案以包含上述更好的做法，那么我会接受它作为答案:) 谢谢。

【解决方案2】：

我读了一篇文章Fix your Timestep它会对你有所帮助，只需将其转换为javascript，仔细阅读。

【讨论】：