https://argokalymnos.gr/templates/gk_sporter/js/lazyload.js

1/*
2---
3description:     LazyLoad
4
5authors:
6  - David Walsh (http://davidwalsh.name)
7
8license:
9  - MIT-style license
10
11requires:
12  core/1.2.1:   '*'
13
14provides:
15  - LazyLoad
16...
17*/
18var LazyLoad = new Class({
19
20	Implements: [Options,Events],
21
22	/* additional options */
23	options: {
24		range: 50,
25		image: 'blank.gif',
26		resetDimensions: false,
27		elements: 'img',
28		container: window,
29		fireScroll: true, /* keeping for legacy */
30		mode: 'vertical',
31		startPosition: 0,
32		mode: 'vertical'
33	},
34
35	/* initialize */
36	initialize: function(options) {
37		
38		// get excluded selectors
39		var excluded = document.id('gkLazyLoad').get('data-excluded');
40		var excludedImgs = new Elements();
41		this.excluded = excluded.split(","); 
42		this.excluded = this.excluded.filter(function(item, index){
43   			return item != "";
44		});
45		
46		// collect all excluded img elements
47		
48		this.excluded.each(function(selector, index){
49			if(selector.substring(0,1) == '^') {
50				excludedImgs.append($$(selector.substring(1, selector.length)+' img'));
51			} else {
52				excludedImgs.append($$(selector));
53			}
54		});
55		
56		/* vars */
57		this.setOptions(options);
58		this.container = document.id(this.options.container);
59		
60		this.elements = $$(this.options.elements);
61		
62		// small validation	
63		if(excludedImgs.length > 0) {
64			this.elements = this.elements.differentiate(excludedImgs);
65		}
66		
67		
68		var axis = (this.options.mode == 'vertical' ? 'y': 'x');
69		axis = 'y';
70		this.containerDimension = this.container.getSize()[axis];
71		this.startPosition = 0;
72
73		var offset = (this.container != window && this.container != document.body ? this.container : "");
74
75		/* find elements remember and hold on to */
76		this.elements = this.elements.filter(function(el) {
77			var elPos = el.getPosition(offset)[axis];
78			
79			/* reset image src IF the image is below the fold and range */
80			if(elPos > this.containerDimension + this.options.range) {
81				el.store('oSRC',el.get('src')).set('src',this.options.image);
82				el.setStyle("opacity", 0);
83				if(this.options.resetDimensions) {
84					el.store('oWidth',el.get('width')).store('oHeight',el.get('height')).set({'width':'','height':''});
85				}
86				return true;
87			}
88		},this);
89		
90		
91		
92		/* create the action function */
93		var action = function() {
94			var cpos = this.container.getScroll()[axis];
95			if(cpos > this.startPosition) {
96				this.elements = this.elements.filter(function(el) {
97					if((cpos + this.options.range + this.containerDimension) >= el.getPosition(offset)[axis]) {
98						if(el.retrieve('oSRC')) { el.set('src',el.retrieve('oSRC')); el.fade(1);}
99						if(this.options.resetDimensions) {
100							el.set({ width: el.retrieve('oWidth'), height: el.retrieve('oHeight') });
101						}
102						
103						this.fireEvent('load',[el]);
104						return false;
105					}
106					return true;
107				},this);
108				this.startPosition = cpos;
109			}
110			this.fireEvent('scroll');
111			/* remove this event IF no elements */
112			if(!this.elements.length) {
113				this.container.removeEvent('scroll',action);
114				this.fireEvent('complete');
115			}
116		}.bind(this);
117
118		/* listen for scroll */
119		window.addEvent('scroll',action);
120		if(this.options.fireScroll) { action();}
121	}
122});
123
124window.addEvent('domready', function(){
125	var lazyloader = new LazyLoad({
126  	range: 20,
127  	image: 'blank.gif',
128  	resetDimensions: false,
129  	elements: 'img'
130	});
131});
132
133
134function ArraySubtract(ara1,ara2) { 
135  var aRes = new Array() ; 
136  for(var i=0;i<ara1.length;i++) { 
137    if( ! (ara2.contains(ara1[i]) )) { 
138      aRes.push(ara1[i]) ; 
139    } 
140  } 
141  return aRes ; 
142
143}
144
145/*
146---
147description: Additional methods for the Array class
148
149license: MIT-style
150
151authors:
152- Alexander Herrmann
153
154requires:
155  core/1.4.3: [Array]
156
157provides:
158- Array.intersect
159- Array.differentiate
160- Array.getRange
161- Array.reverse()
162...
163*/
164Array.implement({
165	
166	/**
167	 * Creates an intersection of the current array and the given one.
168	 * Returns as new array.
169	 * @param Array other	the array to use
170	 * @return Array
171	 */
172	intersect: function(other) {
173		var cpy = this.slice();
174		this.each(function(el) {
175			if (other.indexOf(el) < 0) {			
176				cpy.splice(cpy.indexOf(el), 1);
177			}
178		}, this);
179		return cpy;
180	},
181	
182	/**
183	 * Returns the symmetric difference between this array and the given one.
184	 * Means the items both arrays include are removed from both and then both are combined.
185	 * @param Array other	the array to use
186	 * @return Array
187	 */
188	differentiate: function(other) {
189		var src = this.slice();
190		var cmp = other.slice();
191		other.each(function(elem) {
192			if (src.indexOf(elem) > -1) {
193				// remove from both

194				src.splice(src.indexOf(elem), 1);
195				cmp.splice(cmp.indexOf(elem), 1);
196			}
197		}, this);
198		// combine remaining items
199		return src.combine(cmp);
200	}
201});