Image load detector with progress events, implemented in Angular.

• Routing can now be integrated (new)
• Detects image loading of all images within an element and broadcasts angular progression events
• Works with ng-repeat.
• It can be used on different items
• No need to worry about inserting asynchronous image elements into the DOM

How to make use of it:

Place metadata – images loaded on an item containing images.

<div data-images-loaded>
 <div data-ng-repeat="image in images">
 		<img ng-src="https://lorempixel.com/{{image.src}}">
 	  <div>Foo Bar</div>
 </div>
</div>

Use $event.stopPropagation() in your controller when using progress events and routing nests.

$scope.$on('PROGRESS', function($event, progress) {
   console.log(progress);
   $event.stopPropagation();
   
   switch(progress.status) {
       case 'QUARTER':
           $scope.progress = 25;
           break;
       case 'HALF':
           $scope.progress = 50;
           break;
       case 'THREEQUARTERS':
           $scope.progress = 75;
           break;
       case 'FULL':
           $scope.progress = 100;
           break;
   }
 });

image load detector with progress event, angular-images-loaded Plugin/Github

See Demo And Download

Official Website(bimal1331): Click Here

This superior jQuery/javascript plugin is developed by bimal1331. For extra advanced usage, please go to the official website.