View loading by unspecified sections, not by DOM elements

#1

Here’s what my app does: tap a button, take a picture, it’s saved to local storage, and it’s displayed in a grid below. All that works fine. Now I know images from the filesystem load a little slow, and it’s an Ionic/Cordova limitation. I can deal with that, just put a loading symbol up before it’s there.

The part that’s throwing me off is it’s not loading one image at a time. It’s looks like it’s loading sections of the entire view at once. I’ve taken some screenshots of what it looks like. The buttons always load instantaneously.

It’s just a starter app I’m using to make an independent module, so it’s just an <img> with an ng-repeat on it - here’s what my index.html looks like.

<ion-content class="has-header padding" ng-controller="CameraController as Camera">
 <button class="button button-full button-energized" ng-click="Camera.takePhoto()"> Take Photo </button>
 <button class="button button-full button-positive" ng-click="Camera.clearStorage()"> Clear Storage </button>
 <br><br>
 <img class="photo" ng-repeat="image in Camera.images" ng-src="{{Camera.urlForImage(image)}}">
</ion-content>

So it can be ruled out, here’s the style.css.

.photo{
  display: block;
  float: left;
  width: 31%;
   margin:1%;
}

Here’s the CameraController :

.controller('CameraController', function($scope, $ionicPlatform, CameraService, FileService){
  var camera = this;

  $ionicPlatform.ready(function(){
    camera.images = FileService.images();
    $scope.$apply();
  });

  camera.clearStorage = function(){
    window.localStorage.clear();
    camera.images = FileService.images();
  }

  camera.urlForImage = function(imageName){
    var trueOrigin = cordova.file.dataDirectory + imageName;
    return trueOrigin;
  }
  
  camera.takePhoto = function(){
    //This takes a photo and pipes it to the FileService to save to the local storage
    CameraService.takePhoto(); 
  }
})

Any ideas?