Using "ImagesLoaded"-Plugin on event in AngularJS

Question

If a part of my page is re-rendered I'd like to display a loading indicator. It is noticed by an event emitted from the re-rendered part.

I use http://desandro.github.io/imagesloaded/

Inside my directive:

app.directive('pendingIndicator', function(){
    return {
        restrict: 'A',
        link: function(scope, element) {
            scope.$on('pending', function(){
                scope.imgLoad = imagesLoaded( element );
            });
        }
    };
});

Unfortunately an error is thrown if I try to wrap the imagesLoaded() in an event listener ($on) or $watch.

Error message from console:

TypeError: 'undefined' is not an object (evaluating 'eventie.bind')

Has anybody a clue what's going on there an why this might not work?

Answer 1

I was able to use ImagesLoaded plugin as shown in this plunkr.

This is just an example to point you in the right direction. Ideally, you would extract the logic of the ImagesLoaded plugin (removing the need for Jquery) and do this purely in AngularJS.

I think you want to listen for the ImagesLoaded events differently. Here is the modified directive code w/some comments/suggestions.

angular.module('myApp', []).
  directive('pendingIndicator', function(){
    return {
        restrict: 'A',
        link: function(scope, element) {
            // setup the container for ImagesLoaded ... note instead of using
            // this directive on an individual image, you may consider using
            // it on the element that contains many images...
            scope.imagesLoaded = imagesLoaded(element);
            // start your progress/loading animation here
            // (or whenever you attempt to load the images)
            scope.imagesLoaded.on('always', function() {
              console.log('always event: Triggered after all images have been either loaded or confirmed broken.');
              // end the progress/loading animation here for all images or do
              // it individually in the progress event handler below
            });
            scope.imagesLoaded.on('done', function() {
              console.log('done event: Triggered after all images have successfully loaded without any broken images.');
            });
            scope.imagesLoaded.on('fail', function() {
              console.log('fail event: Triggered after all images have been loaded with at least one broken image.');
            });
            scope.imagesLoaded.on('progress', function(instance, image) {
              console.log('proress event: Triggered after each image has been loaded.', instance, image);
              // end the progress/loading animation here or do it for all images in the always
              // event handler above
            });

        }
    };
});