angular-images-loaded-jtt

angular-images-loaded

####Image load detector with progress events

• Directive can be nested now (NEW)
• Detects images load for all images inside an element and broadcasts angular progress events
• Works with ng-repeat.
• Can be used on different elements
• Need not worry about asynchronous image elements insertion into DOM

#####REQUIREMENTS

• Angularjs 1.2+ only

#####INSTALLATION

• Download angular-images-loaded-directive.min.js and include it with your JS files.
• Include module jtt_imagesLoaded in your main app module.

#####USAGE

• Put directive data-images-loaded on an element containing images.

  Eg.

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

• You can nest the directive

  Eg.

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

  That's it!

#####EVENTS(Always available)

• imagesLoaded.SUCCESS - All images have been successfully loaded

• imagesLoaded.FAIL - All images have been loaded with atleast 1 failed image

• imagesLoaded.ALWAYS - All images are done, whether successfully loaded or failed to load. This event is always broadcasted

  Subscribe to these events in your controller as shown below

  $scope.$on('imagesLoaded.SUCCESS', function() {
    console.log('ALL LOADED');
  });
  
  $scope.$on('imagesLoaded.FAIL', function() {
    console.log('ALL LOADED WITH ATLEAST ONE FAILED');
  });
  
   $scope.$on('imagesLoaded.ALWAYS', function() {
    console.log('ALL DONE ALWAYS');        
  });
  

#####PROGRESS EVENTS

• imagesLoaded.QUARTER - One fourth of total images have been loaded/failed

• imagesLoaded.HALF - Half of total images have been loaded/failed

• imagesLoaded.THREEQUARTERS - Three fourth of total images have been loaded/failed

• imagesLoaded.FULL - All images have been loaded/failed

  Main event is imagesLoaded.PROGRESS, other events are received in the callback via progress.status

  Subscribe to these progress events in your controller as shown below

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

#####Note :-

1. To listen to progress events, use attribute data-use-progress-events as shown below -

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

• data-use-progress-events="yes" to listen to progress events

• data-use-progress-events="no" to skip progress events and just listen to main events

  This approach is taken to minimise $digest cycles in case you wish to skip progress events, since all angular-specific changes take place in the $digest cycle. That's why, I have kept progress events to a minimum, otherwise N images load will cause N $digest cycles to notify the subscriber, which can hamper performance.

1. Use $event.stopPropagation() in your controller when using progress events and nesting the directive, otherwise you'll receive same notification multiple times.

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