iPhone不能正确播放动画精灵？

Question

我已在Android上测试过，效果很好，但在iPhone上似乎非常卡顿。我认为这是图像预加载错误导致的，所以在使用简单的jQuery预加载程序之后，它仍然存在问题。

这些图片非常巨大，最大尺寸为25025px x 80px。

我想知道是否有什么我忽略的东西？

请访问http://www.prosperitymedia.co.uk/test/查看问题。

作为一个附注，我正在使用名为Spritely的插件。

- Xavier

---

据我所见，图片开始移动并且占用了大量内存，我使用的是iPhone 3G...它们似乎没有被缓存，我的猜测是在iPhone上，巨大的图片没有被缓存，Safari正在尝试逐帧加载...一遍又一遍地重新加载图片。或者只是我的愚蠢的3G。 - Mihai Iorga

Answer 1

好的，我在另一部手机上进行了测试。

并不是Spritely不能显示动画，而是iPhone正在尝试缓存所有帧，逐帧显示。

由于您拥有所有字母表和大约数百帧，这个过程太慢了。

如果在您的iPhone上测试http://www.spritely.net，您将会看到这些鸟逐帧加载（总共3帧），最后一切正常，因为Safari已经加载了所有帧。

我猜测您需要减少智能手机的帧数和动画数量，因为它们没有那么多内存。

- Mihai Iorga

---

我认为如果我们减少帧数，那么动画在浏览器上的渲染效果可能会不如预期。我们能否使用其他元素来显示动画，比如 .mp4 或者 .gif 动画？ - Xavier

我认为你不能嵌入那么容易的mp4，因为我从未尝试过。但我认为使用.gif或减少帧数是最好的选择。最好有一些加载或动画效果，而不是让用户的浏览器崩溃。 - Mihai Iorga

Answer 2

这是一个棘手的情况，但我们找到了确切的解决方法。我们发现iPhone性能问题并不是由于精灵数量引起的，而是由于浏览器同时加载和动画化图像导致崩溃。

因此，为了防止这种情况发生，我们使用了jQuery插件预加载图像，但效果并不理想。

最终，我们编写了一个自定义函数将图像写入DOM，然后通过jQuery的.css()函数将其附加到div上的<img onload="customFunction" />。

在进行图像加载时，我们使用了预加载（loading）屏幕来通知用户有事情正在发生。

希望这可以帮助未来遇到类似问题的人。

- Xavier