Working with Angular ~1.4?

[melv-n]

It depends on 1.3.x, any plans on making it work with 1.4?

[RevillWeb]

Hi, have you tried it with 1.4? I would expect it to work but I've not tried it myself. I will take a look and get back to you.

[patrioticcow]

I'm using 4.3. for the tag use the code below. notice the attrs.$observe('ngSrc', function (url) ...

angular.module('angular-preload-image').directive('preloadImage', ['preLoader', function (preLoader) {
return {
    restrict: 'A',
    terminal: true,
    priority: 100,
    link    : function (scope, element, attrs) {
        attrs.$observe('ngSrc', function (url) {
            scope.default = attrs.defaultImage || "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wEWEygNWiLqlwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAMSURBVAjXY/j//z8ABf4C/tzMWecAAAAASUVORK5CYII=";
            attrs.$set('src', scope.default);
            preLoader(url, function () {
                attrs.$set('src', url);
            }, function () {
                if (attrs.fallbackImage != undefined) {
                    attrs.$set('src', attrs.fallbackImage);
                }
            });
        });
    }
};
}]);

[patrioticcow]

and here is got the bg image

angular.module('angular-preload-image').directive('preloadBgImage', ['preLoader', function (preLoader) {
return {
    restrict: 'A',
    link    : function (scope, element, attrs) {
        attrs.$observe('preloadBgImage', function (preloadBgImage) {
            //Define default image
            var fallbackImage = attrs.fallbackImage;
            scope.default     = attrs.defaultImage || "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wEWEygNWiLqlwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAMSURBVAjXY/j//z8ABf4C/tzMWecAAAAASUVORK5CYII=";
            element.css({
                'background-image': 'url("' + scope.default + '")'
            });
            preLoader(preloadBgImage, function () {
                element.css({
                    'background-image': 'url("' + preloadBgImage + '")'
                });
            }, function () {
                if (fallbackImage != undefined) {
                    element.css({
                        'background-image': 'url("' + fallbackImage + '")'
                    });
                }
            });
        });
    }
};
}]);

[patrioticcow]

seem to work ok for me, but feel free to improve upon them.

[RevillWeb]

Thank you for your feedback and sample code. Could you provide a little more information on the issue. I've just tried it with Angular 1.4.3 and it appears to be functioning perfectly for me.

[patrioticcow]

I'm not able to pinpoint the issue, It might be that my images come from a server after the page has loaded so i need to $observe the changes and apply them..

Similar to $(document).on('click', 'button', function(){}) rather then Similar to $(button).on('click', function(){})