me-lazyload
30 |
31 |
35 |
36 |
32 | ![]()
33 |
34 | 
37 |
38 |
39 |
40 |
52 |
53 |
--------------------------------------------------------------------------------
/me-lazyload.js:
--------------------------------------------------------------------------------
1 | angular.module('me-lazyload', [])
2 | .directive('lazySrc', ['$window', '$document', function($window, $document){
3 | var doc = $document[0],
4 | body = doc.body,
5 | win = $window,
6 | $win = angular.element(win),
7 | uid = 0,
8 | elements = {};
9 |
10 | function getUid(el){
11 | var __uid = el.data("__uid");
12 | if (! __uid) {
13 | el.data("__uid", (__uid = '' + ++uid));
14 | }
15 | return __uid;
16 | }
17 |
18 | function getWindowOffset(){
19 | var t,
20 | pageXOffset = (typeof win.pageXOffset == 'number') ? win.pageXOffset : (((t = doc.documentElement) || (t = body.parentNode)) && typeof t.scrollLeft == 'number' ? t : body).scrollLeft,
21 | pageYOffset = (typeof win.pageYOffset == 'number') ? win.pageYOffset : (((t = doc.documentElement) || (t = body.parentNode)) && typeof t.scrollTop == 'number' ? t : body).scrollTop;
22 | return {
23 | offsetX: pageXOffset,
24 | offsetY: pageYOffset
25 | };
26 | }
27 |
28 | function isVisible(iElement){
29 | var elem = iElement[0],
30 | elemRect = elem.getBoundingClientRect(),
31 | windowOffset = getWindowOffset(),
32 | winOffsetX = windowOffset.offsetX,
33 | winOffsetY = windowOffset.offsetY,
34 | elemWidth = elemRect.width || elem.width,
35 | elemHeight = elemRect.height || elem.height,
36 | elemOffsetX = elemRect.left + winOffsetX,
37 | elemOffsetY = elemRect.top + winOffsetY,
38 | viewWidth = Math.max(doc.documentElement.clientWidth, win.innerWidth || 0),
39 | viewHeight = Math.max(doc.documentElement.clientHeight, win.innerHeight || 0),
40 | xVisible,
41 | yVisible;
42 |
43 | if(elemOffsetY <= winOffsetY){
44 | if(elemOffsetY + elemHeight >= winOffsetY){
45 | yVisible = true;
46 | }
47 | }else if(elemOffsetY >= winOffsetY){
48 | if(elemOffsetY <= winOffsetY + viewHeight){
49 | yVisible = true;
50 | }
51 | }
52 |
53 | if(elemOffsetX <= winOffsetX){
54 | if(elemOffsetX + elemWidth >= winOffsetX){
55 | xVisible = true;
56 | }
57 | }else if(elemOffsetX >= winOffsetX){
58 | if(elemOffsetX <= winOffsetX + viewWidth){
59 | xVisible = true;
60 | }
61 | }
62 |
63 | return xVisible && yVisible;
64 | };
65 |
66 | function checkImage(){
67 | angular.forEach(elements, function(obj, key) {
68 | var iElement = obj.iElement,
69 | $scope = obj.$scope;
70 | if(isVisible(iElement)){
71 | iElement.attr('src', $scope.lazySrc);
72 | }
73 | });
74 | }
75 |
76 | $win.bind('scroll', checkImage);
77 | $win.bind('resize', checkImage);
78 |
79 | function onLoad(){
80 | var $el = angular.element(this),
81 | uid = getUid($el);
82 |
83 | $el.css('opacity', 1);
84 |
85 | if(elements.hasOwnProperty(uid)){
86 | delete elements[uid];
87 | }
88 | }
89 |
90 | return {
91 | restrict: 'A',
92 | scope: {
93 | lazySrc: '@',
94 | animateVisible: '@',
95 | animateSpeed: '@'
96 | },
97 | link: function($scope, iElement){
98 | iElement.bind('load', onLoad);
99 |
100 | $scope.$watch('lazySrc', function(){
101 | var speed = "1s";
102 | if ($scope.animateSpeed != null) {
103 | speed = $scope.animateSpeed;
104 | }
105 | if(isVisible(iElement)){
106 | if ($scope.animateVisible) {
107 | iElement.css({
108 | 'opacity': 0,
109 | '-webkit-transition': 'opacity ' + speed,
110 | 'transition': 'opacity ' + speed
111 | });
112 | }
113 | iElement.attr('src', $scope.lazySrc);
114 | }else{
115 | var uid = getUid(iElement);
116 | iElement.css({
117 | 'opacity': 0,
118 | '-webkit-transition': 'opacity ' + speed,
119 | 'transition': 'opacity ' + speed
120 | });
121 | elements[uid] = {
122 | iElement: iElement,
123 | $scope: $scope
124 | };
125 | }
126 | });
127 |
128 | $scope.$on('$destroy', function(){
129 | iElement.unbind('load');
130 | var uid = getUid(iElement);
131 | if(elements.hasOwnProperty(uid)){
132 | delete elements[uid];
133 | }
134 | });
135 | }
136 | };
137 | }]);
138 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "me-lazyload",
3 | "version": "0.0.6",
4 | "description": "image lazyload directive for angular",
5 | "main": "me-lazyload.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "https://github.com/Treri/me-lazyload.git"
12 | },
13 | "keywords": [
14 | "angular",
15 | "lazyload"
16 | ],
17 | "author": "Treri",
18 | "license": "MIT",
19 | "bugs": {
20 | "url": "https://github.com/Treri/me-lazyload/issues"
21 | },
22 | "homepage": "https://github.com/Treri/me-lazyload"
23 | }
24 |
--------------------------------------------------------------------------------