Question

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

Answer 1

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.