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?

Sunil D. · Accepted Answer · 2013-12-22 18:44:03Z

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

        }
    };
});

answered Dec 22, 2013 at 18:44

Sunil D.

18.2k6 gold badges55 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kernfrucht Over a year ago

I think I've been there already. The problem is that the images I want to monitor are loaded asynchronously and not at page load. So I need to tell ImagesLoaded to start working via an event. There I get the error above. (When I wrap the setup for ImagesLoaded in an event)

jmhostalet Over a year ago

Hi Sunil, your directive is working for me but 'always' is called n times instead of just one. If I load 10 images it is called 10 times

Collectives™ on Stack Overflow

Using "ImagesLoaded"-Plugin on event in AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related