Urigo/angular-spinkit — pull request #15 by dmgts (2014-10-13 13:55:50+00:00)
Title: Add image preloader directive

So, here is example - http://jsfiddle.net/doberq/18sw49bm/13/ (I've added the $timeout service for demonstration purposes, in other case an image will be cached after the first loading and you wouldn't see the spinner).

The algorithm is following:
1. Check for the existence of the requested spinkit-directive.
2. Create the spinner and wrap it (our wrapper is going to emulate the image block while our image element is hidden).
3. Copy dimensions from the image to the spinner wrapper. We try to copy dimensions from inline styles (style="width:...") and attributes (width="..." ...).
If a client didn't specify any dimensions then we assume he does it through CSS and in this case we assigned to our spinner-wrapper css-class - "spinner-wrapper".
4. Create the ng-src attribute watcher which hides an image element and shows the spinner after a source changing. Since the aforementioned watcher gets called at least once - It doesn't matter which attribute used: ng-src or src, it works either way.
5. Do the same as in section 4 but in reverse.

P.S: I've already used this directive in my project. Also I can do some specs if you need.