Image loaded event in for ng-src in AngularJS

ghz 1years ago ⋅ 3616 views

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?

Answer

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 />
#angularjs