angular-preload-image/angular-preload-image.js at master · RevillWeb/angular-preload-image · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
/**
 * License: MIT
 */
(function(angular) {
    'use strict';
    angular.module('angular-preload-image', []);
    angular.module('angular-preload-image').factory('preLoader', function () {
        return function (url, successCallback, errorCallback) {
            //Thank you Adriaan for this little snippet: http://www.bennadel.com/members/11887-adriaan.htm
            angular.element(new Image()).bind('load', function () {
                successCallback();
            }).bind('error', function () {
                errorCallback();
            }).attr('src', url);
        }
    });
    angular.module('angular-preload-image').directive('preloadImage', ['preLoader', function (preLoader) {
        return {
            restrict: 'A',
            terminal: true,
            priority: 100,
            link: function (scope, element, attrs) {
                scope.default = attrs.defaultImage || "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wEWEygNWiLqlwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAMSURBVAjXY/j//z8ABf4C/tzMWecAAAAASUVORK5CYII=";
                attrs.$observe('ngSrc', function () {
                    var url = attrs.ngSrc;
                    attrs.$set('src', scope.default);
                    preLoader(url, function () {
                        attrs.$set('src', url);
                    }, function () {
                        if (attrs.fallbackImage != undefined) {
                            attrs.$set('src', attrs.fallbackImage);
                        }
                    });
                })

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

                    attrs.$observe('preloadBgImage', function () {
                        element.css({
                            'background-image': 'url("' + scope.default + '")'
                        });
                        preLoader(attrs.preloadBgImage, function () {
                            element.css({
                                'background-image': 'url("' + attrs.preloadBgImage + '")'
                            });
                        }, function () {
                            if (attrs.fallbackImage != undefined) {
                                element.css({
                                    'background-image': 'url("' + attrs.fallbackImage + '")'
                                });
                            }
                        });
                    });
                }
            }
        };
    }]);
})(angular);