angularjs watch an image to see if it has finished loading

Question

Using Angular How can I watch an image to see if it has finished loading inside a directive?

For example show an alert when the image has been fully retrieved from the URL (not when the div is rendered).

html:

 <img src="{{thumbnail}}" image-loading-spinner/>

directive:

directive('imageLoadingSpinner', ['$document', '$parse', function ($document, $parse) {

    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
             // get item to watch?
             scope.$watch(????, function (newValue) {
               //has loaded image url?
               alert('got the image!')
          )}

        }
    };


}]).

@RGraham I tested that code and it does not run after the image has been retrieved so it fires at the wrong time. http://jsfiddle.net/2CsfZ/2/ — Prometheus, Aug 19 '14 at 11:33
Then you should pose *that* as a question. As it stands, this question is a duplicate and already has an answer. — CodingIntrigue, Aug 19 '14 at 11:34

score 1 · Accepted Answer · answered Aug 19 '14 at 11:29

There would not be an existing watch expression for that. You could code your a custom watch function, but I would advise against that. Watches are evaluated quite often. And what you're looking for is single event.

You should look into reacting to both load and error events instead.

angularjs watch an image to see if it has finished loading

1 Answers1