Image Loaded Event in for Ng-Src in Angularjs

Image loaded event in for ng-src in AngularJS

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

onload image event in AngularJS component

For something like this, I would use a directive as opposed to a component. Directly from the AngularJS documentation:

When not to use Components:

-for directives that rely on DOM manipulation, adding event listeners etc, because the compile and link functions are unavailable

AngularJS ng-src does not load new image with same url

I think this is a browser caching issue, not ng-src problem.

Try appending ?<timestamp> to value of user.profileImage.

This will force browser to fetch the new image.

AngularJS - Image onload directive - this' reference not working?

Created a fiddle for you.. checkout this

              scope.$apply(function (){
                  //scope.$eval(attrs.ngImageOnLoad);
                  $parse(attrs.ngImageOnLoad)(scope, {'this': element[0]});
              });

Detecting an image is fully loaded from a directive, where the directive is not applied to the image element

Check this working demo: JSFiddle

Use anguler.element to find the img element and bind the event.

In your directive, it should be element.find('img').

angular.module('Joy', [])
    .directive('hello', [function () {
    return {
        restrict: 'A',
        link: function (scope, ele) {
            var img = ele.find('img');
            console.log(img);
            img.bind('load', function () {
                console.log('img is loaded');
            });
        }
    };
}]);

HTML:

<div ng-app="Joy">
    <div hello>
        <img ng-src="https://www.google.com.hk/images/srpr/logo11w.png">
    </div>
</div>

---

Update 1

If use ng-repeat, add a $timeout to wait for ng-repeat finishes first. Check working demo: JSFiddle.

Note: this demo is loading a very large image. After the image is loaded, the text img is loaded will be shown.

Update 2

If the event binding is not working, try native image.onload binding (or oncomplete to find images cached). Working demo: JSFiddle.

AngularJS - Image onload event

Here's a re-usable directive in the style of angular's inbuilt event handling directives:

angular.module('sbLoad', [])

  .directive('sbLoad', ['$parse', function ($parse) {
    return {
      restrict: 'A',
      link: function (scope, elem, attrs) {
        var fn = $parse(attrs.sbLoad);
        elem.on('load', function (event) {
          scope.$apply(function() {
            fn(scope, { $event: event });
          });
        });
      }
    };
  }]);

When the img load event is fired the expression in the sb-load attribute is evaluated in the current scope along with the load event, passed in as $event. Here's how to use it:

HTML

<div ng-controller="MyCtrl">
  <img sb-load="onImgLoad($event)">
</div>

JS

  .controller("MyCtrl", function($scope){
    // ...
    $scope.onImgLoad = function (event) {
        // ...
    }

Note: "sb" is just the prefix I use for my custom directives.

---

Related Topics