ng-src: show a throbber before an image is loaded

you can do this with a directive which replaces your image with a spinner whenever the path changes and shows the image when it is loaded.

  <img my-src="{{currentUrl}}">

  app.directive("mySrc", function() {
    return {
      link: function(scope, element, attrs) {
        var img, loadImage;
        img = null;

        loadImage = function() {

          element[0].src = "pathToSpinner";

          img = new Image();
          img.src = attrs.mySrc;

          img.onload = function() {
            element[0].src = attrs.mySrc;
          };
        };

        scope.$watch((function() {
          return attrs.mySrc;
        }), function(newVal, oldVal) {
          if (oldVal !== newVal) {
            loadImage();
          }
        });
      }
    };
  });

I know its pretty late but i do it like

<img src="img/loader.gif" ng-src={{dynamicImageURL}}>

by default your loader img will show and later when dynamicImageURL gets resolved, the image will be replaced by angular.

You could do this with CSS. Set the background of the img tag to the animated gif. The background will show until the image is loaded.

    img{
      background-image: url('throbber.gif') no-repeat;
    }