add effect plugin (see #25)

aFarkas · Nov 18, 2014 · 25cd929 · 25cd929
1 parent 516c4b1
commit 25cd929
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 4 deletions.
diff --git a/lazysizes.js b/lazysizes.js
@@ -450,6 +450,8 @@
 			}
 		},
 		updateSizes: updateSizes,
-		updatePolyfill: updatePolyfill
+		updatePolyfill: updatePolyfill,
+		aC: addClass,
+		rC: removeClass
 	};
 }));
diff --git a/lazysizes.min.js b/lazysizes.min.js
diff --git a/maxdpr/index.html b/maxdpr/index.html
@@ -59,7 +59,7 @@
 						<div class="form-group">
 							<div class="col-sm-6">
 								<label for="maxdpr">maxdpr</label>
-								<input id="maxdpr" name="maxdpr" value="1.5" min="1.2" max="1.9" step="0.1" type="range" />
+								<input id="maxdpr" name="maxdpr" value="1.5" min="1" max="1.9" step="0.1" type="range" />
 							</div>
 						</div>
 					</div>

diff --git a/plugins/effect/ls.effect.js b/plugins/effect/ls.effect.js
@@ -0,0 +1,86 @@
+/**
+ * effect plugin for lazySizes:
+ *
+ * Usage:
+ *
+ * 1. fadein after loading:
+ *
+
+ 	img.lazyload,
+ 	img.lazyloading {
+		opacity: 0;
+	}
+ 	img.lazyloaded {
+ 		opacity: 1;
+ 		transition: opacity 300ms;
+ 	}
+
+ *
+ * 2. fadein while loading:
+ *
+
+ 	img.lazyload {
+		opacity: 0;
+	}
+ 	img.lazyloading {
+ 		opacity: 1;
+ 		transition: opacity 300ms;
+ 	}
+ */
+
+(function(window, document){
+	'use strict';
+	var config, animEvent;
+
+	if(document.addEventListener){
+		config = window.lazySizesConfig || (window.lazySizes && lazySizes.cfg);
+		animEvent = 'onwebkitanimationend' in window  ? 'webkitanimationend' : 'animationend';
+
+		if(!config){
+			config = {};
+			window.lazySizesConfig = config;
+		}
+
+		if(!('loadingClass' in config)){
+			config.loadingClass = 'lazyloading';
+		}
+		if(!('loadedClass' in config)){
+			config.loadedClass = 'lazyloaded';
+		}
+
+
+
+		document.addEventListener('lazybeforeunveil', function(e){
+			if(!e.defaultPrevented && e.target.nodeName.toUpperCase() == 'IMG' && lazySizes.aC) {
+
+				e.target.addEventListener('load', onLoad, false);
+				e.target.addEventListener('error', onLoad, false);
+				if(config.loadingClass){
+					lazySizes.aC(e.target, config.loadingClass);
+				}
+			}
+		}, false);
+
+	}
+
+	function removeLoadedClass(e){
+		e.target.removeEventListener('transitionend', removeLoadedClass, false);
+		e.target.removeEventListener(animEvent, removeLoadedClass, false);
+		lazySizes.rC(e.target, config.loadedClass);
+	}
+
+	function onLoad(e){
+		e.target.removeEventListener('load', onLoad, false);
+		e.target.removeEventListener('error', onLoad, false);
+		if(config.loadingClass){
+			lazySizes.rC(e.target, config.loadingClass);
+		}
+		if(config.loadedClass){
+			e.target.addEventListener('transitionend', removeLoadedClass, false);
+			e.target.addEventListener(animEvent, removeLoadedClass, false);
+			lazySizes.aC(e.target, config.loadedClass);
+		}
+	}
+
+
+})(window, document);