Directive to show a loader until the image is ready in AngularJS

gistfile1.txt

angular.module('app', [])
.directive('onFinishRender', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            element.attr('style', 'display:none');  // hide the image until it's loaded
            element.on('load', function () {
                element.attr('style', '');
                $timeout(function () {
                    scope.$emit('ngOnFinishRender')
                });
            });
        }
    }
})
.controller('ImageController', function($scope){
    $scope.loading = true;  // show loader initially
    $scope.img = 'path_to_your_image.jpg';
    $scope.$on('ngOnFinishRender', function(ngRepeatFinishedEvent) {
        $scope.loading = false;  // hide loader once image is loaded
    });
});


//====
<div ng-controller="ImageController">
    <img ng-src="{{img}}" on-finish-render>
    <div ng-show="loading">loading...</div>
</div>