I successfully implemented the ImagesLoaded plugin, as demonstrated in this plunkr.
This is just a starting point to guide you. It would be ideal if you can refactor the logic of the ImagesLoaded plugin (eliminating the need for Jquery) and handle it purely within AngularJS.
To optimize how you listen for ImagesLoaded events, here is an adjusted directive code with additional comments and suggestions:
angular.module('myApp', []).
directive('pendingIndicator', function(){
return {
restrict: 'A',
link: function(scope, element) {
// prepare the container for ImagesLoaded ... consider using
// this directive on a parent element containing multiple images...
scope.imagesLoaded = imagesLoaded(element);
// initiate your progress/loading animation at this point
// (or whenever the image loading process begins)
scope.imagesLoaded.on('always', function() {
console.log('always event: Triggered after all images have loaded or are confirmed broken.');
// conclude the progress/loading animation for all images here,
// either collectively or individually in the progress event handler shown below
});
scope.imagesLoaded.on('done', function() {
console.log('done event: Triggered after all images have successfully loaded without any issues.');
});
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('progress event: Executed after each individual image finishes loading.', instance, image);
// wrap up the progress/loading animation here or perform it for
// all images within the 'always' event handler above
});
}
};
});