Unintrusive image loading indicator on iphone

I'm looking for a simple method to implement a 'loading' indicator on img elements for Mobile Safari (and possibly other mobile agents). At first sight, using the background: property on such elements seems the way to go. There are two problems though:

• Agents tend to start rendering already when only part of the image is loaded. This looks pretty weird in combination with the loading indicator image.
• I'd like to apply a css3 rotation animation (spin) to the loading indicator (and not to the final image).

Setting the content css property to '' and a simple class-tag that indicates the image is loading would work around this. Unfortunately, this also somehow prevents Mobile Safari from doing the animation (although it seems to work fine in Chrome).

Other (and perhaps better) solutions would involve multiple elements, but I am specifically trying to prevent this. Css pseudo classes :before or :after also do not work in combination开发者_Python百科 with animations.

My attempt thusfar: https://gist.github.com/1225523#file_loading.html

Any suggestions?

I would suggest spin.js that is all CSS3 based and it don't use any image. You can customize your spinner very easy.

SPIN.JS