npm:angular-images-loaded-jtt

README

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 :-

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.

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;
   }
 });

Usage no npm install needed!