angularjs - Show a loading screen as background images load in ng-repeat -

i have list loaded through ng-repeat each element contains img tag. i'd show sort of loading indicator (occluding list items) until every image within every item has finished loading.

i guess need hook event broadcast angular back-img directive don't know start here.

okay, solved problem. first of all, @vladimir, you're totally right -- back-img directive colleague wrote, obscured solution me while.

what i've done write simple directive calls $scope-bound function on img's load event. controller counts number of images have loaded, , once enough images have loaded, removes loading indicator , shows list of images. here's summary of code:

my directive:

app.directive('loadedimage', function($parse) { return {     restrict: 'a',     scope: true,     link: function(scope, element, attrs) {         element.bind("load", function(event) {             var invoker = $parse(attrs.loadedcallback);             invoker(scope);             });         }     } }); 

within element:

<img ng-src='{{ item.large }}' loaded-image loaded-callback="imageloaded(r.id)"> 

and finally, within controller:

$scope.numloaded = 0; $scope.showloading = true; $scope.showimages = false;  $scope.imageloaded = function(id) {     $scope.numloaded++;     if ($scope.numloaded > 9) {         $scope.showloading = false;         $timeout(function() {             $scope.showimages = true;         }, 500) //show images once loading indicator has faded away     }; }; 

i'm not sure right approach, reliably works me!