Show an Ionic 1 Spinner While Online Images Load

I can has more kitten GIFs plz?

Create a directive to execute a function once the image loads:

function imageOnLoad() {
  return {
    restrict: ‘A’,
    link: function(scope, element, attrs) {
      element.bind(‘load’, function() {
        //call the function that was passed
        scope.$apply(attrs.imageonload);
      });
    }
  };
}
angular
  .module(‘myapp’)
  .directive(‘imageonload’, imageOnLoad);

Add a reveal function to your controller:

$scope.imageLoaded = function(object) {
  object.loaded = true;
}

This example assumes you don’t have a loaded variable in your kitten object.
Add the directive and hide your image:

<ul>
  <li ng-repeat="kitten in kittens">
    <img ng-src="{{kitten.image}}" imageonload="imageLoaded(kitten)" ng-show="kitten.loaded"></img>
  </li>
</ul>

Then add your spinner and show it until the image is loaded:

<ul>
  <li ng-repeat="kitten in kittens">
    <img ng-src="{{kitten.image}}" imageonload="imageLoaded(kitten)" ng-show="kitten.loaded"></img>
    <ion-spinner ng-show="!kitten.loaded"></ion-spinner>
  </li>
</ul>

Add the text-center class to your li if you want to center your spinner.