我正在用 HTML5 创建一个 3D 视频老虎机游戏。
游戏很棒，在 Firefox 中完美运行。它使用 PNG 序列为游戏中的角色和效果提供 3D 外观。PNG 的总数为 550（每个动画 70 个）。
主要问题来自 Safari（桌面、iPad 和 iPhone）。当我加载超过 100 个 PNG 的较长动画时，帧率急剧下降到 4 左右。我认为这是因为 Safari 图像内存无法很好地保存 550 个图像——尽管它总共只有大约 10mb。
鉴于文件大小也很重要，因为它是一个网页游戏，我考虑将所有 PNG 转换为 GIF 以减少大约一半的大小 - 但是，在我开始这段旅程之前，我认为同样的事情会因为数量而发生的图像。
所以这里的问题是 - 对于 PNG 序列风格的游戏，在 HTML5 中实现这一点的最佳跨浏览器兼容方式是什么？
到目前为止，我唯一的想法是为每个动画制作一个 spritesheet，放入 div 并在左侧/顶部移动。或者，这可能是我预加载图像的方式的问题吗？
不幸的是，我无法显示任何源代码。