I have created a directive that is responsible for rescaling and cropping an image based on its height and width.
angular.module('starter.directives', ['starter.controllers']).directive('styleImage', function () {
return {
restrict: 'A',
link: function preLink(scope, elem, attr) {
elem.on('load', function () {
styleImage(elem[0])
});
}
};
This "styleImage" function calculates the element's width and height to rescale and crop the image accordingly. I use the directive in the following way:
<img ng-src="{{user.image_path }}" class="user-image" style-image
id="{{'user'+user.user_id}}">
Everything works fine except for the fact that when the page loads, there is a slight delay before the directive kicks in to rescale and crop the image. As a result, the images initially appear with their original dimensions. I am wondering if there is a way to make sure the directive runs before the image finishes loading. If this is possible, how can I achieve it?