Image loaded event in for ng-src in AngularJS

Question

I have images looking like <img ng-src="dynamically inserted url"/>. When a single image is loaded, I need to apply iScroll refresh() method so that to make image scrollable.

What is the best way to know when an image is fully loaded to run some callback?

Take a look at [$http Response Interceptors](http://docs.angularjs.org/api/ng.$http). You could use this to register a callback when the promise resolves — Mark Meyer, Jul 26 '13 at 14:53

score 188 · Accepted Answer · edited Jan 27 '16 at 15:51

188

Here is an example how to call image onload http://jsfiddle.net/2CsfZ/2/

Basic idea is create a directive and add it as attribute to img tag.

JS:

app.directive('imageonload', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('load', function() {
                alert('image is loaded');
            });
            element.bind('error', function(){
                alert('image could not be loaded');
            });
        }
    };
});

HTML:

 <img ng-src="{{src}}" imageonload />

edited Jan 27 '16 at 15:51

chris Frisina

19,086
22
87
167

answered Jul 26 '13 at 14:59

mikach

2,427
2
14
15

1

what about a failure callback? – Oleg Belousov Apr 20 '14 at 01:16
3

What about progressive image? – Nguyễn Đức Long Jan 15 '17 at 10:37

score 150 · Answer 2 · answered Sep 01 '14 at 16:26

150

I modified this a little so that custom $scope methods can be called:

<img ng-src="{{src}}" imageonload="doThis()" />

The directive:

.directive('imageonload', function() {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                element.bind('load', function() {
                    //call the function that was passed
                    scope.$apply(attrs.imageonload);
                });
            }
        };
    })

Hope someone finds it VERY useful. Thanks @mikach

The doThis() function would then be a $scope method

answered Sep 01 '14 at 16:26

Peter

6,509
4
30
34

3

That's correct. Mikach's solution didn't work for me until I used $apply() as you did. – Jeremy Thille Jan 20 '15 at 09:03
This is the best of the answers provided. Totally eliminates the need for any JQUERY loading as well. – Noel Baron Dec 09 '16 at 18:12
Thank you for putting semi-colons so lint wouldn't explode. – richard Jan 26 '18 at 19:51
this gives me this error: https://code.angularjs.org/1.4.9/docs/error/$rootScope/inprog?p0=$digest – Paulo Roberto Rosa Apr 16 '20 at 18:44

score 9 · Answer 3 · edited Aug 26 '15 at 09:44

9

@ Oleg Tikhonov: Just updated the previous code.. @ mikach Thanks..)

app.directive('imageonload', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
        element.bind('load', function() {
            alert('image is loaded');
        });
        element.bind('error', function(){
             alert('image could not be loaded');
        });
    }
  };
});

edited Aug 26 '15 at 09:44

Aurelio

24,702
9
60
63

answered May 28 '15 at 16:28

Kailash

123
1
7

1

Might be better to have that in an 'imageonerror' directive so you can perform a different action. – Jon Catmull Oct 30 '15 at 13:58

score 5 · Answer 4 · answered Sep 26 '17 at 21:07

5

My answer:

 var img = new Image();
 var imgUrl = "path_to_image.jpg";
 img.src = imgUrl;
 img.onload = function () {
      $scope.pic = img.src;
 }

answered Sep 26 '17 at 21:07

Rodrigo Andrade

51
1
2

score 4 · Answer 5 · answered Apr 28 '16 at 12:22

Just updated the previous code..

<img ng-src="{{urlImg}}" imageonload="myOnLoadImagenFunction">

and directive...

    .directive('imageonload', function() {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                element.bind('load', function() {
                    scope.$apply(attrs.imageonload)(true);
                });
                element.bind('error', function(){
                  scope.$apply(attrs.imageonload)(false);
                });
            }
        };
    })

score 0 · Answer 6 · answered Jul 15 '16 at 08:01

Basically this is the solution I ended up using.

$apply() should only be used by external sources in the right circumstances.

rather then using apply, I've thrown the scope updating to end of the call stack. Works as good as "scope.$apply(attrs.imageonload)(true);".

window.app.directive("onImageload", ["$timeout", function($timeout) {

    function timeOut(value, scope) {
        $timeout(function() {
            scope.imageLoaded = value;
        });
    }

    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('load', function() {
                timeOut(true, scope);
            }).bind('error', function() {
                timeOut(false, scope);
            });
        }
    };

}]);

what you mean by "`$apply()` should only be used by external sources"? i'm not following. — genuinefafa, Sep 14 '16 at 13:25
@genuinefafa What he means by 'external sources' is non-Angular code. So for instance if you're using a generic JS event listener to call into code that changes $scope, you would need to use $apply there. But if it's an Angular event or a $scope function you don't need $apply because the $digest cycle is already running from Angular methods. — tpartee, Aug 10 '17 at 17:57

Image loaded event in for ng-src in AngularJS

6 Answers6

Linked

Related