iPhone is not playing animation sprites properly ?

I have tested this on Android and it works great but on 开发者_高级运维iPhone it seems very laggy, i have assumed it was an error with image preloading so after firing in a simple jquery preloader it still seems to give issues.

The images are huge maxing at 25025px by 80px

I wonder if you can see something i am missing ?

http://www.prosperitymedia.co.uk/test/

To view the issue view the site on your iphone / itouch.

As a side note i am using a plugin called Spritely

---

Ok i tested on another phone

It's not that spritely can't display the animation, is the iPhone who is trying to cache all frames, frame by frame and then display.

As you have all alphabet and rougly hundreds of frames this process is too slow.

If you test http://www.spritely.net on your iPhone you will see that the birds are loading frame by frame (and that is 3 frames) and at the end all works ok because Safari has all frames.

My guess is you need to reduce the frames and the number of animations for smart phones as they don't have that much memory.

---

So this was a tricky situation to overcome but here are our exact workings. We found that it wasn't performance related issues with the iphone due to the number of sprites, what was happening was the browser was crashing due to loading and animating the images at the same time.

So to stop this from happening we had to preload our images using a plugin for jQuery which evidently didn't work very well.

In the end we wrote a custom function to write the images to the DOM and then <img onload="customFunction" /> to attach that to a div via the jQuery .css() function.

Whilst this image loading was taking place we used a preloading (loading) screen to inform the user that there was something happening.

I hope this helps anyone in the future with a similar problem.