vanilla-lazyload - npm Package Compare versions

Comparing version 8.14.0 to 8.15.0

CHANGELOG.md

@@ -5,2 +5,7 @@ # CHANGELOG
 
+#### 10.15.0
+
+- Refactorized code & improved script performance
+- **BUGFIX**: Fixed webpack import (issue #230) `TypeError: default is not a constructor`
+
 #### 10.14.0
@@ -20,4 +25,3 @@
 | `lazyload.amd.min.js`  | AMD (Asynchronous Module Definition)           | Works with the *require.js* module loader, ~0.5kb smaller minified |
-| `lazyload.es.js`       | ES Module type                                 | Exports `LazyLoad` so you can import it in your project            |
-| `lazyload.es2015.js`   | ES Module type wrapped in UMD                  | **Deprecated!** This file will be removed in the next version.     |
+| `lazyload.es2015.js`   | ES Module type                                 | Exports `LazyLoad` so you can import it in your project            |
 
@@ -132,3 +136,3 @@ #### 10.12.0
 ## Version 9
-
+ 
 #### 9.0.1
@@ -147,2 +151,7 @@
 
+#### 8.15.0
+
+- Refactorized code & improved script performance
+- **BUGFIX**: Fixed webpack import (issue #230) `TypeError: default is not a constructor`
+
 #### 8.14.0
@@ -162,4 +171,3 @@
 | `lazyload.amd.min.js`  | AMD (Asynchronous Module Definition)           | Works with the *require.js* module loader, ~0.5kb smaller minified |
-| `lazyload.es.js`       | ES Module type                                 | Exports `LazyLoad` so you can import it in your project            |
-| `lazyload.es2015.js`   | ES Module type wrapped in UMD                  | **Deprecated!** This file will be removed in the next version.     |
+| `lazyload.es2015.js`   | ES Module type                                 | Exports `LazyLoad` so you can import it in your project            |
 
@@ -166,0 +174,0 @@ #### 8.12.0

dist/lazyload.amd.js

@@ -87,4 +87,6 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 	function autoInitialize(classObj, options) {
-		var optsLength = options.length;
-		if (!optsLength) {
+		if (!options) {
+			return;
+		}
+		if (!options.length) {
 			// Plain object
@@ -94,4 +96,4 @@ createInstance(classObj, options);
 			// Array of objects
-			for (var i = 0; i < optsLength; i++) {
-				createInstance(classObj, options[i]);
+			for (var i = 0, optionsItem; optionsItem = options[i]; i += 1) {
+				createInstance(classObj, optionsItem);
 			}
@@ -121,29 +123,29 @@ }
 
-	var runningOnBrowser = typeof window !== "undefined";
+	var replaceExtToWebp = function replaceExtToWebp(value, condition) {
+		return condition ? value.replace(/\.(jpe?g|png)/gi, ".webp") : value;
+	};
 
-	var isBot = runningOnBrowser && !("onscroll" in window) || /(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent);
-	var supportsClassList = runningOnBrowser && "classList" in document.createElement("p");
+	var detectWebp = function detectWebp() {
+		var webpString = "image/webp";
+		var canvas = document.createElement("canvas");
 
-	var detectWebP = function detectWebP() {
-		if (!runningOnBrowser) {
-			return false;
+		if (canvas.getContext && canvas.getContext("2d")) {
+			return canvas.toDataURL(webpString).indexOf("data:" + webpString) === 0;
 		}
 
-		var webPString = "image/webp";
-		var elem = document.createElement("canvas");
-
-		if (elem.getContext && elem.getContext("2d")) {
-			return elem.toDataURL(webPString).indexOf("data:" + webPString) === 0;
-		}
-
 		return false;
 	};
 
-	var supportsWebP = detectWebP();
+	var runningOnBrowser = typeof window !== "undefined";
 
-	var setSourcesInChildren = function setSourcesInChildren(parentTag, attrName, dataAttrName, toWebP) {
+	var isBot = runningOnBrowser && !("onscroll" in window) || /(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent);
+	var supportsClassList = runningOnBrowser && "classList" in document.createElement("p");
+
+	var supportsWebp = runningOnBrowser && detectWebp();
+
+	var setSourcesInChildren = function setSourcesInChildren(parentTag, attrName, dataAttrName, toWebpFlag) {
 		for (var i = 0, childTag; childTag = parentTag.children[i]; i += 1) {
 			if (childTag.tagName === "SOURCE") {
 				var attrValue = getData(childTag, dataAttrName);
-				setAttributeIfNotNullOrEmpty(childTag, attrName, attrValue, toWebP);
+				setAttributeIfValue(childTag, attrName, attrValue, toWebpFlag);
 			}
@@ -153,49 +155,65 @@ }
 
-	var replaceExtToWebp = function replaceExtToWebp(value, condition) {
-		return condition ? value.replace(/\.(jpe?g|png)/gi, ".webp") : value;
-	};
-
-	var setAttributeIfNotNullOrEmpty = function setAttributeIfNotNullOrEmpty(element, attrName, value, toWebP) {
+	var setAttributeIfValue = function setAttributeIfValue(element, attrName, value, toWebpFlag) {
 		if (!value) {
 			return;
 		}
-		element.setAttribute(attrName, replaceExtToWebp(value, toWebP));
+		element.setAttribute(attrName, replaceExtToWebp(value, toWebpFlag));
 	};
 
-	function setSources(element, settings) {
-		var sizesDataName = settings.data_sizes,
-		    srcsetDataName = settings.data_srcset,
-		    srcDataName = settings.data_src;
+	var setSourcesImg = function setSourcesImg(element, settings) {
+		var toWebpFlag = supportsWebp && settings.to_webp;
+		var srcsetDataName = settings.data_srcset;
+		var parent = element.parentNode;
 
+		if (parent && parent.tagName === "PICTURE") {
+			setSourcesInChildren(parent, "srcset", srcsetDataName, toWebpFlag);
+		}
+		var sizesDataValue = getData(element, settings.data_sizes);
+		setAttributeIfValue(element, "sizes", sizesDataValue);
+		var srcsetDataValue = getData(element, srcsetDataName);
+		setAttributeIfValue(element, "srcset", srcsetDataValue, toWebpFlag);
+		var srcDataValue = getData(element, settings.data_src);
+		setAttributeIfValue(element, "src", srcDataValue, toWebpFlag);
+	};
+
+	var setSourcesIframe = function setSourcesIframe(element, settings) {
+		var srcDataValue = getData(element, settings.data_src);
+
+		setAttributeIfValue(element, "src", srcDataValue);
+	};
+
+	var setSourcesVideo = function setSourcesVideo(element, settings) {
+		var srcDataName = settings.data_src;
 		var srcDataValue = getData(element, srcDataName);
-		var mustChangeToWebP = supportsWebP && settings.to_webp;
-		switch (element.tagName) {
-			case "IMG":
-				{
-					var parent = element.parentNode;
-					if (parent && parent.tagName === "PICTURE") {
-						setSourcesInChildren(parent, "srcset", srcsetDataName, mustChangeToWebP);
-					}
-					var sizesDataValue = getData(element, sizesDataName);
-					setAttributeIfNotNullOrEmpty(element, "sizes", sizesDataValue);
-					var srcsetDataValue = getData(element, srcsetDataName);
-					setAttributeIfNotNullOrEmpty(element, "srcset", srcsetDataValue, mustChangeToWebP);
-					setAttributeIfNotNullOrEmpty(element, "src", srcDataValue, mustChangeToWebP);
-					break;
-				}
-			case "IFRAME":
-				setAttributeIfNotNullOrEmpty(element, "src", srcDataValue);
-				break;
-			case "VIDEO":
-				setSourcesInChildren(element, "src", srcDataName);
-				setAttributeIfNotNullOrEmpty(element, "src", srcDataValue);
-				break;
-			default:
-				if (srcDataValue) {
-					var setValue = replaceExtToWebp(srcDataValue, mustChangeToWebP);
-					element.style.backgroundImage = "url(\"" + setValue + "\")";
-				}
+
+		setSourcesInChildren(element, "src", srcDataName);
+		setAttributeIfValue(element, "src", srcDataValue);
+	};
+
+	var setSourcesBgImage = function setSourcesBgImage(element, settings) {
+		var toWebpFlag = supportsWebp && settings.to_webp;
+		var srcDataValue = getData(element, settings.data_src);
+
+		if (srcDataValue) {
+			var setValue = replaceExtToWebp(srcDataValue, toWebpFlag);
+			element.style.backgroundImage = "url(\"" + setValue + "\")";
 		}
-	}
+	};
 
+	var setSourcesFunctions = {
+		IMG: setSourcesImg,
+		IFRAME: setSourcesIframe,
+		VIDEO: setSourcesVideo
+	};
+
+	var setSources = function setSources(element, settings) {
+		var tagName = element.tagName;
+		var setSourcesFunction = setSourcesFunctions[tagName];
+		if (setSourcesFunction) {
+			setSourcesFunction(element, settings);
+			return;
+		}
+		setSourcesBgImage(element, settings);
+	};
+
 	var addClass = function addClass(element, className) {
@@ -404,6 +422,5 @@ if (supportsClassList) {
 
-	/* Automatic instances creation if required (useful for async script loading!) */
-	var autoInitOptions = window.lazyLoadOptions;
-	if (runningOnBrowser && autoInitOptions) {
-		autoInitialize(LazyLoad, autoInitOptions);
+	/* Automatic instances creation if required (useful for async script loading) */
+	if (runningOnBrowser) {
+		autoInitialize(LazyLoad, window.lazyLoadOptions);
 	}
@@ -410,0 +427,0 @@

dist/lazyload.amd.min.js

@@ -1,2 +0,2 @@
-var _extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e};define(function(){"use strict";function e(e,t,n){return!(s(e,t,n)||a(e,t,n)||l(e,t,n)||c(e,t,n))}function t(e,t){var n=t.data_sizes,i=t.data_srcset,o=t.data_src,s=d(e,o),r=v&&t.to_webp;switch(e.tagName){case"IMG":var l=e.parentNode;l&&"PICTURE"===l.tagName&&w(l,"srcset",i,r);var a=d(e,n);E(e,"sizes",a);var c=d(e,i);E(e,"srcset",c,r),E(e,"src",s,r);break;case"IFRAME":E(e,"src",s);break;case"VIDEO":w(e,"src",o),E(e,"src",s);break;default:if(s){var u=b(s,r);e.style.backgroundImage='url("'+u+'")'}}}var n=function(){return{elements_selector:"img",container:window,threshold:300,throttle:150,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_initial:"initial",skip_invisible:!0,callback_load:null,callback_error:null,callback_set:null,callback_processed:null,callback_enter:null,to_webp:!1}},i=function(e,t){e&&e(t)},o=function(e){return e.getBoundingClientRect().top+window.pageYOffset-e.ownerDocument.documentElement.clientTop},s=function(e,t,n){return(t===window?window.innerHeight+window.pageYOffset:o(t)+t.offsetHeight)<=o(e)-n},r=function(e){return e.getBoundingClientRect().left+window.pageXOffset-e.ownerDocument.documentElement.clientLeft},l=function(e,t,n){var i=window.innerWidth;return(t===window?i+window.pageXOffset:r(t)+i)<=r(e)-n},a=function(e,t,n){return(t===window?window.pageYOffset:o(t))>=o(e)+n+e.offsetHeight},c=function(e,t,n){return(t===window?window.pageXOffset:r(t))>=r(e)+n+e.offsetWidth},u=function(e,t){var n,i=new e(t);try{n=new CustomEvent("LazyLoad::Initialized",{detail:{instance:i}})}catch(e){(n=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:i})}window.dispatchEvent(n)},d=function(e,t){return e.getAttribute("data-"+t)},h=function(e,t,n){return e.setAttribute("data-"+t,n)},_=function(e){return h(e,"was-processed","true")},p=function(e){return"true"===d(e,"was-processed")},f="undefined"!=typeof window,g=f&&!("onscroll"in window)||/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),m=f&&"classList"in document.createElement("p"),v=function(){if(!f)return!1;var e=document.createElement("canvas");return!(!e.getContext||!e.getContext("2d"))&&0===e.toDataURL("image/webp").indexOf("data:image/webp")}(),w=function(e,t,n,i){for(var o,s=0;o=e.children[s];s+=1)if("SOURCE"===o.tagName){var r=d(o,n);E(o,t,r,i)}},b=function(e,t){return t?e.replace(/\.(jpe?g|png)/gi,".webp"):e},E=function(e,t,n,i){n&&e.setAttribute(t,b(n,i))},L=function(e,t){m?e.classList.add(t):e.className+=(e.className?" ":"")+t},T=function(e,t){m?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},O=function(e){this._settings=_extends({},n(),e),this._queryOriginNode=this._settings.container===window?document:this._settings.container,this._previousLoopTime=0,this._loopTimeout=null,this._boundHandleScroll=this.handleScroll.bind(this),this._isFirstLoop=!0,window.addEventListener("resize",this._boundHandleScroll),this.update()};O.prototype={_reveal:function(e,n){if(n||!p(e)){var o=this._settings,s=function t(){o&&(e.removeEventListener("load",r),e.removeEventListener("error",t),T(e,o.class_loading),L(e,o.class_error),i(o.callback_error,e))},r=function t(){o&&(T(e,o.class_loading),L(e,o.class_loaded),e.removeEventListener("load",t),e.removeEventListener("error",s),i(o.callback_load,e))};i(o.callback_enter,e),["IMG","IFRAME","VIDEO"].indexOf(e.tagName)>-1&&(e.addEventListener("load",r),e.addEventListener("error",s),L(e,o.class_loading)),t(e,o),i(o.callback_set,e)}},_loopThroughElements:function(t){var n=this._settings,o=this._elements,s=o?o.length:0,r=void 0,l=[],a=this._isFirstLoop;for(r=0;r<s;r++){var c=o[r];n.skip_invisible&&null===c.offsetParent||(g||t||e(c,n.container,n.threshold))&&(a&&L(c,n.class_initial),this.load(c),l.push(r),_(c))}for(;l.length;)o.splice(l.pop(),1),i(n.callback_processed,o.length);0===s&&this._stopScrollHandler(),a&&(this._isFirstLoop=!1)},_purgeElements:function(){var e=this._elements,t=e.length,n=void 0,i=[];for(n=0;n<t;n++){var o=e[n];p(o)&&i.push(n)}for(;i.length>0;)e.splice(i.pop(),1)},_startScrollHandler:function(){this._isHandlingScroll||(this._isHandlingScroll=!0,this._settings.container.addEventListener("scroll",this._boundHandleScroll))},_stopScrollHandler:function(){this._isHandlingScroll&&(this._isHandlingScroll=!1,this._settings.container.removeEventListener("scroll",this._boundHandleScroll))},handleScroll:function(){var e=this._settings.throttle;if(0!==e){var t=Date.now(),n=e-(t-this._previousLoopTime);n<=0||n>e?(this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._previousLoopTime=t,this._loopThroughElements()):this._loopTimeout||(this._loopTimeout=setTimeout(function(){this._previousLoopTime=Date.now(),this._loopTimeout=null,this._loopThroughElements()}.bind(this),n))}else this._loopThroughElements()},loadAll:function(){this._loopThroughElements(!0)},update:function(){this._elements=Array.prototype.slice.call(this._queryOriginNode.querySelectorAll(this._settings.elements_selector)),this._purgeElements(),this._loopThroughElements(),this._startScrollHandler()},destroy:function(){window.removeEventListener("resize",this._boundHandleScroll),this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._stopScrollHandler(),this._elements=null,this._queryOriginNode=null,this._settings=null},load:function(e,t){this._reveal(e,t)}};var S=window.lazyLoadOptions;return f&&S&&function(e,t){var n=t.length;if(n)for(var i=0;i<n;i++)u(e,t[i]);else u(e,t)}(O,S),O});
+var _extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e};define(function(){"use strict";function e(e,t,n){return!(o(e,t,n)||l(e,t,n)||r(e,t,n)||a(e,t,n))}var t=function(){return{elements_selector:"img",container:window,threshold:300,throttle:150,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_initial:"initial",skip_invisible:!0,callback_load:null,callback_error:null,callback_set:null,callback_processed:null,callback_enter:null,to_webp:!1}},n=function(e,t){e&&e(t)},i=function(e){return e.getBoundingClientRect().top+window.pageYOffset-e.ownerDocument.documentElement.clientTop},o=function(e,t,n){return(t===window?window.innerHeight+window.pageYOffset:i(t)+t.offsetHeight)<=i(e)-n},s=function(e){return e.getBoundingClientRect().left+window.pageXOffset-e.ownerDocument.documentElement.clientLeft},r=function(e,t,n){var i=window.innerWidth;return(t===window?i+window.pageXOffset:s(t)+i)<=s(e)-n},l=function(e,t,n){return(t===window?window.pageYOffset:i(t))>=i(e)+n+e.offsetHeight},a=function(e,t,n){return(t===window?window.pageXOffset:s(t))>=s(e)+n+e.offsetWidth},c=function(e,t){var n,i=new e(t);try{n=new CustomEvent("LazyLoad::Initialized",{detail:{instance:i}})}catch(e){(n=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:i})}window.dispatchEvent(n)},u=function(e,t){return e.getAttribute("data-"+t)},d=function(e,t,n){return e.setAttribute("data-"+t,n)},h=function(e){return d(e,"was-processed","true")},_=function(e){return"true"===u(e,"was-processed")},f=function(e,t){return t?e.replace(/\.(jpe?g|png)/gi,".webp"):e},p="undefined"!=typeof window,g=p&&!("onscroll"in window)||/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),m=p&&"classList"in document.createElement("p"),v=p&&function(){var e=document.createElement("canvas");return!(!e.getContext||!e.getContext("2d"))&&0===e.toDataURL("image/webp").indexOf("data:image/webp")}(),w=function(e,t,n,i){for(var o,s=0;o=e.children[s];s+=1)if("SOURCE"===o.tagName){var r=u(o,n);E(o,t,r,i)}},E=function(e,t,n,i){n&&e.setAttribute(t,f(n,i))},b=function(e,t){var n=v&&t.to_webp,i=u(e,t.data_src);if(i){var o=f(i,n);e.style.backgroundImage='url("'+o+'")'}},L={IMG:function(e,t){var n=v&&t.to_webp,i=t.data_srcset,o=e.parentNode;o&&"PICTURE"===o.tagName&&w(o,"srcset",i,n);var s=u(e,t.data_sizes);E(e,"sizes",s);var r=u(e,i);E(e,"srcset",r,n);var l=u(e,t.data_src);E(e,"src",l,n)},IFRAME:function(e,t){var n=u(e,t.data_src);E(e,"src",n)},VIDEO:function(e,t){var n=t.data_src,i=u(e,n);w(e,"src",n),E(e,"src",i)}},T=function(e,t){var n=e.tagName,i=L[n];i?i(e,t):b(e,t)},O=function(e,t){m?e.classList.add(t):e.className+=(e.className?" ":"")+t},S=function(e,t){m?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},H=function(e){this._settings=_extends({},t(),e),this._queryOriginNode=this._settings.container===window?document:this._settings.container,this._previousLoopTime=0,this._loopTimeout=null,this._boundHandleScroll=this.handleScroll.bind(this),this._isFirstLoop=!0,window.addEventListener("resize",this._boundHandleScroll),this.update()};return H.prototype={_reveal:function(e,t){if(t||!_(e)){var i=this._settings,o=function t(){i&&(e.removeEventListener("load",s),e.removeEventListener("error",t),S(e,i.class_loading),O(e,i.class_error),n(i.callback_error,e))},s=function t(){i&&(S(e,i.class_loading),O(e,i.class_loaded),e.removeEventListener("load",t),e.removeEventListener("error",o),n(i.callback_load,e))};n(i.callback_enter,e),["IMG","IFRAME","VIDEO"].indexOf(e.tagName)>-1&&(e.addEventListener("load",s),e.addEventListener("error",o),O(e,i.class_loading)),T(e,i),n(i.callback_set,e)}},_loopThroughElements:function(t){var i=this._settings,o=this._elements,s=o?o.length:0,r=void 0,l=[],a=this._isFirstLoop;for(r=0;r<s;r++){var c=o[r];i.skip_invisible&&null===c.offsetParent||(g||t||e(c,i.container,i.threshold))&&(a&&O(c,i.class_initial),this.load(c),l.push(r),h(c))}for(;l.length;)o.splice(l.pop(),1),n(i.callback_processed,o.length);0===s&&this._stopScrollHandler(),a&&(this._isFirstLoop=!1)},_purgeElements:function(){var e=this._elements,t=e.length,n=void 0,i=[];for(n=0;n<t;n++){var o=e[n];_(o)&&i.push(n)}for(;i.length>0;)e.splice(i.pop(),1)},_startScrollHandler:function(){this._isHandlingScroll||(this._isHandlingScroll=!0,this._settings.container.addEventListener("scroll",this._boundHandleScroll))},_stopScrollHandler:function(){this._isHandlingScroll&&(this._isHandlingScroll=!1,this._settings.container.removeEventListener("scroll",this._boundHandleScroll))},handleScroll:function(){var e=this._settings.throttle;if(0!==e){var t=Date.now(),n=e-(t-this._previousLoopTime);n<=0||n>e?(this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._previousLoopTime=t,this._loopThroughElements()):this._loopTimeout||(this._loopTimeout=setTimeout(function(){this._previousLoopTime=Date.now(),this._loopTimeout=null,this._loopThroughElements()}.bind(this),n))}else this._loopThroughElements()},loadAll:function(){this._loopThroughElements(!0)},update:function(){this._elements=Array.prototype.slice.call(this._queryOriginNode.querySelectorAll(this._settings.elements_selector)),this._purgeElements(),this._loopThroughElements(),this._startScrollHandler()},destroy:function(){window.removeEventListener("resize",this._boundHandleScroll),this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._stopScrollHandler(),this._elements=null,this._queryOriginNode=null,this._settings=null},load:function(e,t){this._reveal(e,t)}},p&&function(e,t){if(t)if(t.length)for(var n,i=0;n=t[i];i+=1)c(e,n);else c(e,t)}(H,window.lazyLoadOptions),H});
 //# sourceMappingURL=lazyload.amd.min.js.map

dist/lazyload.es2015.js

@@ -83,16 +83,15 @@ var getDefaultSettings = () => ({
 /* Creates instance and notifies it through the window element */
-const createInstance = function (classObj, options) { 
-    var event;
-    let eventString = "LazyLoad::Initialized";
-    let instance = new classObj(options);
-    try {
-        // Works in modern browsers
-        event = new CustomEvent(eventString, { detail: { instance } });
-    } 
-    catch(err) {
-        // Works in Internet Explorer (all versions)
-        event = document.createEvent("CustomEvent");
-        event.initCustomEvent(eventString, false, false, { instance });
-    }
-    window.dispatchEvent(event);
+const createInstance = function(classObj, options) {
+	var event;
+	let eventString = "LazyLoad::Initialized";
+	let instance = new classObj(options);
+	try {
+		// Works in modern browsers
+		event = new CustomEvent(eventString, { detail: { instance } });
+	} catch (err) {
+		// Works in Internet Explorer (all versions)
+		event = document.createEvent("CustomEvent");
+		event.initCustomEvent(eventString, false, false, { instance });
+	}
+	window.dispatchEvent(event);
 };
@@ -102,14 +101,15 @@
     options passed in (plain object or an array) */
-function autoInitialize (classObj, options) { 
-    let optsLength = options.length;
-    if (!optsLength) {
-        // Plain object
-        createInstance(classObj, options);
-    }
-    else {
-        // Array of objects
-        for (let i = 0; i < optsLength; i++) {
-            createInstance(classObj, options[i]);
-        }
-    }
+function autoInitialize(classObj, options) {
+	if (!options) {
+		return;
+	}
+	if (!options.length) {
+		// Plain object
+		createInstance(classObj, options);
+	} else {
+		// Array of objects
+		for (let i = 0, optionsItem; (optionsItem = options[i]); i += 1) {
+			createInstance(classObj, optionsItem);
+		}
+	}
 }
@@ -135,2 +135,16 @@
 
+const replaceExtToWebp = (value, condition) =>
+	condition ? value.replace(/\.(jpe?g|png)/gi, ".webp") : value;
+
+const detectWebp = () => {
+	var webpString = "image/webp";
+	var canvas = document.createElement("canvas");
+
+	if (canvas.getContext && canvas.getContext("2d")) {
+		return canvas.toDataURL(webpString).indexOf(`data:${webpString}`) === 0;
+	}
+
+	return false;
+};
+
 const runningOnBrowser = typeof window !== "undefined";
@@ -144,19 +158,4 @@
 
-const detectWebP = () => {
-	if (!runningOnBrowser) {
-		return false;
-	}
+const supportsWebp = runningOnBrowser && detectWebp();
 
-	var webPString = "image/webp";
-	var elem = document.createElement("canvas");
-
-	if (elem.getContext && elem.getContext("2d")) {
-		return elem.toDataURL(webPString).indexOf("data:" + webPString) === 0;
-	}
-
-	return false;
-};
-
-const supportsWebP = detectWebP();
-
 const setSourcesInChildren = function(
@@ -166,3 +165,3 @@ parentTag,
 	dataAttrName,
-	toWebP
+	toWebpFlag
 ) {
@@ -172,3 +171,3 @@ for (let i = 0, childTag; (childTag = parentTag.children[i]); i += 1) {
 			let attrValue = getData(childTag, dataAttrName);
-			setAttributeIfNotNullOrEmpty(childTag, attrName, attrValue, toWebP);
+			setAttributeIfValue(childTag, attrName, attrValue, toWebpFlag);
 		}
@@ -178,10 +177,7 @@ }
 
-const replaceExtToWebp = (value, condition) =>
-	condition ? value.replace(/\.(jpe?g|png)/gi, ".webp") : value;
-
-const setAttributeIfNotNullOrEmpty = function(
+const setAttributeIfValue = function(
 	element,
 	attrName,
 	value,
-	toWebP
+	toWebpFlag
 ) {
@@ -191,70 +187,78 @@ if (!value) {
 	}
-	element.setAttribute(attrName, replaceExtToWebp(value, toWebP));
+	element.setAttribute(attrName, replaceExtToWebp(value, toWebpFlag));
 };
 
-function setSources(element, settings) {
-	const {
-		data_sizes: sizesDataName,
-		data_srcset: srcsetDataName,
-		data_src: srcDataName
-	} = settings;
+const setSourcesImg = (element, settings) => {
+	const toWebpFlag = supportsWebp && settings.to_webp;
+	const srcsetDataName = settings.data_srcset;
+	const parent = element.parentNode;
+
+	if (parent && parent.tagName === "PICTURE") {
+		setSourcesInChildren(parent, "srcset", srcsetDataName, toWebpFlag);
+	}
+	const sizesDataValue = getData(element, settings.data_sizes);
+	setAttributeIfValue(element, "sizes", sizesDataValue);
+	const srcsetDataValue = getData(element, srcsetDataName);
+	setAttributeIfValue(element, "srcset", srcsetDataValue, toWebpFlag);
+	const srcDataValue = getData(element, settings.data_src);
+	setAttributeIfValue(element, "src", srcDataValue, toWebpFlag);
+};
+
+const setSourcesIframe = (element, settings) => {
+	const srcDataValue = getData(element, settings.data_src);
+
+	setAttributeIfValue(element, "src", srcDataValue);
+};
+
+const setSourcesVideo = (element, settings) => {
+	const srcDataName = settings.data_src;
 	const srcDataValue = getData(element, srcDataName);
-	const mustChangeToWebP = supportsWebP && settings.to_webp;
-	switch (element.tagName) {
-		case "IMG": {
-			const parent = element.parentNode;
-			if (parent && parent.tagName === "PICTURE") {
-				setSourcesInChildren(
-					parent,
-					"srcset",
-					srcsetDataName,
-					mustChangeToWebP
-				);
-			}
-			const sizesDataValue = getData(element, sizesDataName);
-			setAttributeIfNotNullOrEmpty(element, "sizes", sizesDataValue);
-			const srcsetDataValue = getData(element, srcsetDataName);
-			setAttributeIfNotNullOrEmpty(
-				element,
-				"srcset",
-				srcsetDataValue,
-				mustChangeToWebP
-			);
-			setAttributeIfNotNullOrEmpty(
-				element,
-				"src",
-				srcDataValue,
-				mustChangeToWebP
-			);
-			break;
-		}
-		case "IFRAME":
-			setAttributeIfNotNullOrEmpty(element, "src", srcDataValue);
-			break;
-		case "VIDEO":
-			setSourcesInChildren(element, "src", srcDataName);
-			setAttributeIfNotNullOrEmpty(element, "src", srcDataValue);
-			break;
-		default:
-			if (srcDataValue) {
-				let setValue = replaceExtToWebp(srcDataValue, mustChangeToWebP);
-				element.style.backgroundImage = `url("${setValue}")`;
-			}
+
+	setSourcesInChildren(element, "src", srcDataName);
+	setAttributeIfValue(element, "src", srcDataValue);
+};
+
+const setSourcesBgImage = (element, settings) => {
+	const toWebpFlag = supportsWebp && settings.to_webp;
+	const srcDataValue = getData(element, settings.data_src);
+
+	if (srcDataValue) {
+		let setValue = replaceExtToWebp(srcDataValue, toWebpFlag);
+		element.style.backgroundImage = `url("${setValue}")`;
 	}
-}
+};
 
+const setSourcesFunctions = {
+	IMG: setSourcesImg,
+	IFRAME: setSourcesIframe,
+	VIDEO: setSourcesVideo
+};
+
+const setSources = (element, settings) => {
+	const tagName = element.tagName;
+	const setSourcesFunction = setSourcesFunctions[tagName];
+	if (setSourcesFunction) {
+		setSourcesFunction(element, settings);
+		return;
+	}
+	setSourcesBgImage(element, settings);
+};
+
 const addClass = (element, className) => {
-    if (supportsClassList) {
-        element.classList.add(className);
-        return;
-    }
-    element.className += (element.className ? " " : "") + className;
+	if (supportsClassList) {
+		element.classList.add(className);
+		return;
+	}
+	element.className += (element.className ? " " : "") + className;
 };
 
 const removeClass = (element, className) => {
-    if (supportsClassList) {
-        element.classList.remove(className);
-        return;
-    }
-    element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ").replace(/^\s+/, "").replace(/\s+$/, "");
+	if (supportsClassList) {
+		element.classList.remove(className);
+		return;
+	}
+	element.className = element.className.
+		replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ").
+		replace(/^\s+/, "").
+		replace(/\s+$/, "");
 };
@@ -473,8 +477,7 @@
 
-/* Automatic instances creation if required (useful for async script loading!) */
-let autoInitOptions = window.lazyLoadOptions;
-if (runningOnBrowser && autoInitOptions) {
-	autoInitialize(LazyLoad, autoInitOptions);
+/* Automatic instances creation if required (useful for async script loading) */
+if (runningOnBrowser) {
+	autoInitialize(LazyLoad, window.lazyLoadOptions);
 }
 
 export default LazyLoad;

dist/lazyload.iife.js

@@ -87,4 +87,6 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 	function autoInitialize(classObj, options) {
-		var optsLength = options.length;
-		if (!optsLength) {
+		if (!options) {
+			return;
+		}
+		if (!options.length) {
 			// Plain object
@@ -94,4 +96,4 @@ createInstance(classObj, options);
 			// Array of objects
-			for (var i = 0; i < optsLength; i++) {
-				createInstance(classObj, options[i]);
+			for (var i = 0, optionsItem; optionsItem = options[i]; i += 1) {
+				createInstance(classObj, optionsItem);
 			}
@@ -121,29 +123,29 @@ }
 
-	var runningOnBrowser = typeof window !== "undefined";
+	var replaceExtToWebp = function replaceExtToWebp(value, condition) {
+		return condition ? value.replace(/\.(jpe?g|png)/gi, ".webp") : value;
+	};
 
-	var isBot = runningOnBrowser && !("onscroll" in window) || /(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent);
-	var supportsClassList = runningOnBrowser && "classList" in document.createElement("p");
+	var detectWebp = function detectWebp() {
+		var webpString = "image/webp";
+		var canvas = document.createElement("canvas");
 
-	var detectWebP = function detectWebP() {
-		if (!runningOnBrowser) {
-			return false;
+		if (canvas.getContext && canvas.getContext("2d")) {
+			return canvas.toDataURL(webpString).indexOf("data:" + webpString) === 0;
 		}
 
-		var webPString = "image/webp";
-		var elem = document.createElement("canvas");
-
-		if (elem.getContext && elem.getContext("2d")) {
-			return elem.toDataURL(webPString).indexOf("data:" + webPString) === 0;
-		}
-
 		return false;
 	};
 
-	var supportsWebP = detectWebP();
+	var runningOnBrowser = typeof window !== "undefined";
 
-	var setSourcesInChildren = function setSourcesInChildren(parentTag, attrName, dataAttrName, toWebP) {
+	var isBot = runningOnBrowser && !("onscroll" in window) || /(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent);
+	var supportsClassList = runningOnBrowser && "classList" in document.createElement("p");
+
+	var supportsWebp = runningOnBrowser && detectWebp();
+
+	var setSourcesInChildren = function setSourcesInChildren(parentTag, attrName, dataAttrName, toWebpFlag) {
 		for (var i = 0, childTag; childTag = parentTag.children[i]; i += 1) {
 			if (childTag.tagName === "SOURCE") {
 				var attrValue = getData(childTag, dataAttrName);
-				setAttributeIfNotNullOrEmpty(childTag, attrName, attrValue, toWebP);
+				setAttributeIfValue(childTag, attrName, attrValue, toWebpFlag);
 			}
@@ -153,49 +155,65 @@ }
 
-	var replaceExtToWebp = function replaceExtToWebp(value, condition) {
-		return condition ? value.replace(/\.(jpe?g|png)/gi, ".webp") : value;
-	};
-
-	var setAttributeIfNotNullOrEmpty = function setAttributeIfNotNullOrEmpty(element, attrName, value, toWebP) {
+	var setAttributeIfValue = function setAttributeIfValue(element, attrName, value, toWebpFlag) {
 		if (!value) {
 			return;
 		}
-		element.setAttribute(attrName, replaceExtToWebp(value, toWebP));
+		element.setAttribute(attrName, replaceExtToWebp(value, toWebpFlag));
 	};
 
-	function setSources(element, settings) {
-		var sizesDataName = settings.data_sizes,
-		    srcsetDataName = settings.data_srcset,
-		    srcDataName = settings.data_src;
+	var setSourcesImg = function setSourcesImg(element, settings) {
+		var toWebpFlag = supportsWebp && settings.to_webp;
+		var srcsetDataName = settings.data_srcset;
+		var parent = element.parentNode;
 
+		if (parent && parent.tagName === "PICTURE") {
+			setSourcesInChildren(parent, "srcset", srcsetDataName, toWebpFlag);
+		}
+		var sizesDataValue = getData(element, settings.data_sizes);
+		setAttributeIfValue(element, "sizes", sizesDataValue);
+		var srcsetDataValue = getData(element, srcsetDataName);
+		setAttributeIfValue(element, "srcset", srcsetDataValue, toWebpFlag);
+		var srcDataValue = getData(element, settings.data_src);
+		setAttributeIfValue(element, "src", srcDataValue, toWebpFlag);
+	};
+
+	var setSourcesIframe = function setSourcesIframe(element, settings) {
+		var srcDataValue = getData(element, settings.data_src);
+
+		setAttributeIfValue(element, "src", srcDataValue);
+	};
+
+	var setSourcesVideo = function setSourcesVideo(element, settings) {
+		var srcDataName = settings.data_src;
 		var srcDataValue = getData(element, srcDataName);
-		var mustChangeToWebP = supportsWebP && settings.to_webp;
-		switch (element.tagName) {
-			case "IMG":
-				{
-					var parent = element.parentNode;
-					if (parent && parent.tagName === "PICTURE") {
-						setSourcesInChildren(parent, "srcset", srcsetDataName, mustChangeToWebP);
-					}
-					var sizesDataValue = getData(element, sizesDataName);
-					setAttributeIfNotNullOrEmpty(element, "sizes", sizesDataValue);
-					var srcsetDataValue = getData(element, srcsetDataName);
-					setAttributeIfNotNullOrEmpty(element, "srcset", srcsetDataValue, mustChangeToWebP);
-					setAttributeIfNotNullOrEmpty(element, "src", srcDataValue, mustChangeToWebP);
-					break;
-				}
-			case "IFRAME":
-				setAttributeIfNotNullOrEmpty(element, "src", srcDataValue);
-				break;
-			case "VIDEO":
-				setSourcesInChildren(element, "src", srcDataName);
-				setAttributeIfNotNullOrEmpty(element, "src", srcDataValue);
-				break;
-			default:
-				if (srcDataValue) {
-					var setValue = replaceExtToWebp(srcDataValue, mustChangeToWebP);
-					element.style.backgroundImage = "url(\"" + setValue + "\")";
-				}
+
+		setSourcesInChildren(element, "src", srcDataName);
+		setAttributeIfValue(element, "src", srcDataValue);
+	};
+
+	var setSourcesBgImage = function setSourcesBgImage(element, settings) {
+		var toWebpFlag = supportsWebp && settings.to_webp;
+		var srcDataValue = getData(element, settings.data_src);
+
+		if (srcDataValue) {
+			var setValue = replaceExtToWebp(srcDataValue, toWebpFlag);
+			element.style.backgroundImage = "url(\"" + setValue + "\")";
 		}
-	}
+	};
 
+	var setSourcesFunctions = {
+		IMG: setSourcesImg,
+		IFRAME: setSourcesIframe,
+		VIDEO: setSourcesVideo
+	};
+
+	var setSources = function setSources(element, settings) {
+		var tagName = element.tagName;
+		var setSourcesFunction = setSourcesFunctions[tagName];
+		if (setSourcesFunction) {
+			setSourcesFunction(element, settings);
+			return;
+		}
+		setSourcesBgImage(element, settings);
+	};
+
 	var addClass = function addClass(element, className) {
@@ -404,6 +422,5 @@ if (supportsClassList) {
 
-	/* Automatic instances creation if required (useful for async script loading!) */
-	var autoInitOptions = window.lazyLoadOptions;
-	if (runningOnBrowser && autoInitOptions) {
-		autoInitialize(LazyLoad, autoInitOptions);
+	/* Automatic instances creation if required (useful for async script loading) */
+	if (runningOnBrowser) {
+		autoInitialize(LazyLoad, window.lazyLoadOptions);
 	}
@@ -410,0 +427,0 @@

dist/lazyload.iife.min.js

@@ -1,2 +0,2 @@
-var _extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},LazyLoad=function(){"use strict";function e(e,t,n){return!(s(e,t,n)||a(e,t,n)||l(e,t,n)||c(e,t,n))}function t(e,t){var n=t.data_sizes,i=t.data_srcset,o=t.data_src,s=d(e,o),r=v&&t.to_webp;switch(e.tagName){case"IMG":var l=e.parentNode;l&&"PICTURE"===l.tagName&&w(l,"srcset",i,r);var a=d(e,n);E(e,"sizes",a);var c=d(e,i);E(e,"srcset",c,r),E(e,"src",s,r);break;case"IFRAME":E(e,"src",s);break;case"VIDEO":w(e,"src",o),E(e,"src",s);break;default:if(s){var u=b(s,r);e.style.backgroundImage='url("'+u+'")'}}}var n=function(){return{elements_selector:"img",container:window,threshold:300,throttle:150,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_initial:"initial",skip_invisible:!0,callback_load:null,callback_error:null,callback_set:null,callback_processed:null,callback_enter:null,to_webp:!1}},i=function(e,t){e&&e(t)},o=function(e){return e.getBoundingClientRect().top+window.pageYOffset-e.ownerDocument.documentElement.clientTop},s=function(e,t,n){return(t===window?window.innerHeight+window.pageYOffset:o(t)+t.offsetHeight)<=o(e)-n},r=function(e){return e.getBoundingClientRect().left+window.pageXOffset-e.ownerDocument.documentElement.clientLeft},l=function(e,t,n){var i=window.innerWidth;return(t===window?i+window.pageXOffset:r(t)+i)<=r(e)-n},a=function(e,t,n){return(t===window?window.pageYOffset:o(t))>=o(e)+n+e.offsetHeight},c=function(e,t,n){return(t===window?window.pageXOffset:r(t))>=r(e)+n+e.offsetWidth},u=function(e,t){var n,i=new e(t);try{n=new CustomEvent("LazyLoad::Initialized",{detail:{instance:i}})}catch(e){(n=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:i})}window.dispatchEvent(n)},d=function(e,t){return e.getAttribute("data-"+t)},h=function(e,t,n){return e.setAttribute("data-"+t,n)},_=function(e){return h(e,"was-processed","true")},p=function(e){return"true"===d(e,"was-processed")},f="undefined"!=typeof window,g=f&&!("onscroll"in window)||/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),m=f&&"classList"in document.createElement("p"),v=function(){if(!f)return!1;var e=document.createElement("canvas");return!(!e.getContext||!e.getContext("2d"))&&0===e.toDataURL("image/webp").indexOf("data:image/webp")}(),w=function(e,t,n,i){for(var o,s=0;o=e.children[s];s+=1)if("SOURCE"===o.tagName){var r=d(o,n);E(o,t,r,i)}},b=function(e,t){return t?e.replace(/\.(jpe?g|png)/gi,".webp"):e},E=function(e,t,n,i){n&&e.setAttribute(t,b(n,i))},L=function(e,t){m?e.classList.add(t):e.className+=(e.className?" ":"")+t},T=function(e,t){m?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},O=function(e){this._settings=_extends({},n(),e),this._queryOriginNode=this._settings.container===window?document:this._settings.container,this._previousLoopTime=0,this._loopTimeout=null,this._boundHandleScroll=this.handleScroll.bind(this),this._isFirstLoop=!0,window.addEventListener("resize",this._boundHandleScroll),this.update()};O.prototype={_reveal:function(e,n){if(n||!p(e)){var o=this._settings,s=function t(){o&&(e.removeEventListener("load",r),e.removeEventListener("error",t),T(e,o.class_loading),L(e,o.class_error),i(o.callback_error,e))},r=function t(){o&&(T(e,o.class_loading),L(e,o.class_loaded),e.removeEventListener("load",t),e.removeEventListener("error",s),i(o.callback_load,e))};i(o.callback_enter,e),["IMG","IFRAME","VIDEO"].indexOf(e.tagName)>-1&&(e.addEventListener("load",r),e.addEventListener("error",s),L(e,o.class_loading)),t(e,o),i(o.callback_set,e)}},_loopThroughElements:function(t){var n=this._settings,o=this._elements,s=o?o.length:0,r=void 0,l=[],a=this._isFirstLoop;for(r=0;r<s;r++){var c=o[r];n.skip_invisible&&null===c.offsetParent||(g||t||e(c,n.container,n.threshold))&&(a&&L(c,n.class_initial),this.load(c),l.push(r),_(c))}for(;l.length;)o.splice(l.pop(),1),i(n.callback_processed,o.length);0===s&&this._stopScrollHandler(),a&&(this._isFirstLoop=!1)},_purgeElements:function(){var e=this._elements,t=e.length,n=void 0,i=[];for(n=0;n<t;n++){var o=e[n];p(o)&&i.push(n)}for(;i.length>0;)e.splice(i.pop(),1)},_startScrollHandler:function(){this._isHandlingScroll||(this._isHandlingScroll=!0,this._settings.container.addEventListener("scroll",this._boundHandleScroll))},_stopScrollHandler:function(){this._isHandlingScroll&&(this._isHandlingScroll=!1,this._settings.container.removeEventListener("scroll",this._boundHandleScroll))},handleScroll:function(){var e=this._settings.throttle;if(0!==e){var t=Date.now(),n=e-(t-this._previousLoopTime);n<=0||n>e?(this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._previousLoopTime=t,this._loopThroughElements()):this._loopTimeout||(this._loopTimeout=setTimeout(function(){this._previousLoopTime=Date.now(),this._loopTimeout=null,this._loopThroughElements()}.bind(this),n))}else this._loopThroughElements()},loadAll:function(){this._loopThroughElements(!0)},update:function(){this._elements=Array.prototype.slice.call(this._queryOriginNode.querySelectorAll(this._settings.elements_selector)),this._purgeElements(),this._loopThroughElements(),this._startScrollHandler()},destroy:function(){window.removeEventListener("resize",this._boundHandleScroll),this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._stopScrollHandler(),this._elements=null,this._queryOriginNode=null,this._settings=null},load:function(e,t){this._reveal(e,t)}};var S=window.lazyLoadOptions;return f&&S&&function(e,t){var n=t.length;if(n)for(var i=0;i<n;i++)u(e,t[i]);else u(e,t)}(O,S),O}();
+var _extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},LazyLoad=function(){"use strict";function e(e,t,n){return!(o(e,t,n)||l(e,t,n)||r(e,t,n)||a(e,t,n))}var t=function(){return{elements_selector:"img",container:window,threshold:300,throttle:150,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_initial:"initial",skip_invisible:!0,callback_load:null,callback_error:null,callback_set:null,callback_processed:null,callback_enter:null,to_webp:!1}},n=function(e,t){e&&e(t)},i=function(e){return e.getBoundingClientRect().top+window.pageYOffset-e.ownerDocument.documentElement.clientTop},o=function(e,t,n){return(t===window?window.innerHeight+window.pageYOffset:i(t)+t.offsetHeight)<=i(e)-n},s=function(e){return e.getBoundingClientRect().left+window.pageXOffset-e.ownerDocument.documentElement.clientLeft},r=function(e,t,n){var i=window.innerWidth;return(t===window?i+window.pageXOffset:s(t)+i)<=s(e)-n},l=function(e,t,n){return(t===window?window.pageYOffset:i(t))>=i(e)+n+e.offsetHeight},a=function(e,t,n){return(t===window?window.pageXOffset:s(t))>=s(e)+n+e.offsetWidth},c=function(e,t){var n,i=new e(t);try{n=new CustomEvent("LazyLoad::Initialized",{detail:{instance:i}})}catch(e){(n=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:i})}window.dispatchEvent(n)},u=function(e,t){return e.getAttribute("data-"+t)},d=function(e,t,n){return e.setAttribute("data-"+t,n)},h=function(e){return d(e,"was-processed","true")},_=function(e){return"true"===u(e,"was-processed")},f=function(e,t){return t?e.replace(/\.(jpe?g|png)/gi,".webp"):e},p="undefined"!=typeof window,g=p&&!("onscroll"in window)||/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),m=p&&"classList"in document.createElement("p"),v=p&&function(){var e=document.createElement("canvas");return!(!e.getContext||!e.getContext("2d"))&&0===e.toDataURL("image/webp").indexOf("data:image/webp")}(),w=function(e,t,n,i){for(var o,s=0;o=e.children[s];s+=1)if("SOURCE"===o.tagName){var r=u(o,n);E(o,t,r,i)}},E=function(e,t,n,i){n&&e.setAttribute(t,f(n,i))},b=function(e,t){var n=v&&t.to_webp,i=u(e,t.data_src);if(i){var o=f(i,n);e.style.backgroundImage='url("'+o+'")'}},L={IMG:function(e,t){var n=v&&t.to_webp,i=t.data_srcset,o=e.parentNode;o&&"PICTURE"===o.tagName&&w(o,"srcset",i,n);var s=u(e,t.data_sizes);E(e,"sizes",s);var r=u(e,i);E(e,"srcset",r,n);var l=u(e,t.data_src);E(e,"src",l,n)},IFRAME:function(e,t){var n=u(e,t.data_src);E(e,"src",n)},VIDEO:function(e,t){var n=t.data_src,i=u(e,n);w(e,"src",n),E(e,"src",i)}},T=function(e,t){var n=e.tagName,i=L[n];i?i(e,t):b(e,t)},O=function(e,t){m?e.classList.add(t):e.className+=(e.className?" ":"")+t},S=function(e,t){m?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},y=function(e){this._settings=_extends({},t(),e),this._queryOriginNode=this._settings.container===window?document:this._settings.container,this._previousLoopTime=0,this._loopTimeout=null,this._boundHandleScroll=this.handleScroll.bind(this),this._isFirstLoop=!0,window.addEventListener("resize",this._boundHandleScroll),this.update()};return y.prototype={_reveal:function(e,t){if(t||!_(e)){var i=this._settings,o=function t(){i&&(e.removeEventListener("load",s),e.removeEventListener("error",t),S(e,i.class_loading),O(e,i.class_error),n(i.callback_error,e))},s=function t(){i&&(S(e,i.class_loading),O(e,i.class_loaded),e.removeEventListener("load",t),e.removeEventListener("error",o),n(i.callback_load,e))};n(i.callback_enter,e),["IMG","IFRAME","VIDEO"].indexOf(e.tagName)>-1&&(e.addEventListener("load",s),e.addEventListener("error",o),O(e,i.class_loading)),T(e,i),n(i.callback_set,e)}},_loopThroughElements:function(t){var i=this._settings,o=this._elements,s=o?o.length:0,r=void 0,l=[],a=this._isFirstLoop;for(r=0;r<s;r++){var c=o[r];i.skip_invisible&&null===c.offsetParent||(g||t||e(c,i.container,i.threshold))&&(a&&O(c,i.class_initial),this.load(c),l.push(r),h(c))}for(;l.length;)o.splice(l.pop(),1),n(i.callback_processed,o.length);0===s&&this._stopScrollHandler(),a&&(this._isFirstLoop=!1)},_purgeElements:function(){var e=this._elements,t=e.length,n=void 0,i=[];for(n=0;n<t;n++){var o=e[n];_(o)&&i.push(n)}for(;i.length>0;)e.splice(i.pop(),1)},_startScrollHandler:function(){this._isHandlingScroll||(this._isHandlingScroll=!0,this._settings.container.addEventListener("scroll",this._boundHandleScroll))},_stopScrollHandler:function(){this._isHandlingScroll&&(this._isHandlingScroll=!1,this._settings.container.removeEventListener("scroll",this._boundHandleScroll))},handleScroll:function(){var e=this._settings.throttle;if(0!==e){var t=Date.now(),n=e-(t-this._previousLoopTime);n<=0||n>e?(this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._previousLoopTime=t,this._loopThroughElements()):this._loopTimeout||(this._loopTimeout=setTimeout(function(){this._previousLoopTime=Date.now(),this._loopTimeout=null,this._loopThroughElements()}.bind(this),n))}else this._loopThroughElements()},loadAll:function(){this._loopThroughElements(!0)},update:function(){this._elements=Array.prototype.slice.call(this._queryOriginNode.querySelectorAll(this._settings.elements_selector)),this._purgeElements(),this._loopThroughElements(),this._startScrollHandler()},destroy:function(){window.removeEventListener("resize",this._boundHandleScroll),this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._stopScrollHandler(),this._elements=null,this._queryOriginNode=null,this._settings=null},load:function(e,t){this._reveal(e,t)}},p&&function(e,t){if(t)if(t.length)for(var n,i=0;n=t[i];i+=1)c(e,n);else c(e,t)}(y,window.lazyLoadOptions),y}();
 //# sourceMappingURL=lazyload.iife.min.js.map

dist/lazyload.js

@@ -91,4 +91,6 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 	function autoInitialize(classObj, options) {
-		var optsLength = options.length;
-		if (!optsLength) {
+		if (!options) {
+			return;
+		}
+		if (!options.length) {
 			// Plain object
@@ -98,4 +100,4 @@ createInstance(classObj, options);
 			// Array of objects
-			for (var i = 0; i < optsLength; i++) {
-				createInstance(classObj, options[i]);
+			for (var i = 0, optionsItem; optionsItem = options[i]; i += 1) {
+				createInstance(classObj, optionsItem);
 			}
@@ -125,29 +127,29 @@ }
 
-	var runningOnBrowser = typeof window !== "undefined";
+	var replaceExtToWebp = function replaceExtToWebp(value, condition) {
+		return condition ? value.replace(/\.(jpe?g|png)/gi, ".webp") : value;
+	};
 
-	var isBot = runningOnBrowser && !("onscroll" in window) || /(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent);
-	var supportsClassList = runningOnBrowser && "classList" in document.createElement("p");
+	var detectWebp = function detectWebp() {
+		var webpString = "image/webp";
+		var canvas = document.createElement("canvas");
 
-	var detectWebP = function detectWebP() {
-		if (!runningOnBrowser) {
-			return false;
+		if (canvas.getContext && canvas.getContext("2d")) {
+			return canvas.toDataURL(webpString).indexOf('data:' + webpString) === 0;
 		}
 
-		var webPString = "image/webp";
-		var elem = document.createElement("canvas");
-
-		if (elem.getContext && elem.getContext("2d")) {
-			return elem.toDataURL(webPString).indexOf("data:" + webPString) === 0;
-		}
-
 		return false;
 	};
 
-	var supportsWebP = detectWebP();
+	var runningOnBrowser = typeof window !== "undefined";
 
-	var setSourcesInChildren = function setSourcesInChildren(parentTag, attrName, dataAttrName, toWebP) {
+	var isBot = runningOnBrowser && !("onscroll" in window) || /(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent);
+	var supportsClassList = runningOnBrowser && "classList" in document.createElement("p");
+
+	var supportsWebp = runningOnBrowser && detectWebp();
+
+	var setSourcesInChildren = function setSourcesInChildren(parentTag, attrName, dataAttrName, toWebpFlag) {
 		for (var i = 0, childTag; childTag = parentTag.children[i]; i += 1) {
 			if (childTag.tagName === "SOURCE") {
 				var attrValue = getData(childTag, dataAttrName);
-				setAttributeIfNotNullOrEmpty(childTag, attrName, attrValue, toWebP);
+				setAttributeIfValue(childTag, attrName, attrValue, toWebpFlag);
 			}
@@ -157,49 +159,65 @@ }
 
-	var replaceExtToWebp = function replaceExtToWebp(value, condition) {
-		return condition ? value.replace(/\.(jpe?g|png)/gi, ".webp") : value;
-	};
-
-	var setAttributeIfNotNullOrEmpty = function setAttributeIfNotNullOrEmpty(element, attrName, value, toWebP) {
+	var setAttributeIfValue = function setAttributeIfValue(element, attrName, value, toWebpFlag) {
 		if (!value) {
 			return;
 		}
-		element.setAttribute(attrName, replaceExtToWebp(value, toWebP));
+		element.setAttribute(attrName, replaceExtToWebp(value, toWebpFlag));
 	};
 
-	function setSources(element, settings) {
-		var sizesDataName = settings.data_sizes,
-		    srcsetDataName = settings.data_srcset,
-		    srcDataName = settings.data_src;
+	var setSourcesImg = function setSourcesImg(element, settings) {
+		var toWebpFlag = supportsWebp && settings.to_webp;
+		var srcsetDataName = settings.data_srcset;
+		var parent = element.parentNode;
 
+		if (parent && parent.tagName === "PICTURE") {
+			setSourcesInChildren(parent, "srcset", srcsetDataName, toWebpFlag);
+		}
+		var sizesDataValue = getData(element, settings.data_sizes);
+		setAttributeIfValue(element, "sizes", sizesDataValue);
+		var srcsetDataValue = getData(element, srcsetDataName);
+		setAttributeIfValue(element, "srcset", srcsetDataValue, toWebpFlag);
+		var srcDataValue = getData(element, settings.data_src);
+		setAttributeIfValue(element, "src", srcDataValue, toWebpFlag);
+	};
+
+	var setSourcesIframe = function setSourcesIframe(element, settings) {
+		var srcDataValue = getData(element, settings.data_src);
+
+		setAttributeIfValue(element, "src", srcDataValue);
+	};
+
+	var setSourcesVideo = function setSourcesVideo(element, settings) {
+		var srcDataName = settings.data_src;
 		var srcDataValue = getData(element, srcDataName);
-		var mustChangeToWebP = supportsWebP && settings.to_webp;
-		switch (element.tagName) {
-			case "IMG":
-				{
-					var parent = element.parentNode;
-					if (parent && parent.tagName === "PICTURE") {
-						setSourcesInChildren(parent, "srcset", srcsetDataName, mustChangeToWebP);
-					}
-					var sizesDataValue = getData(element, sizesDataName);
-					setAttributeIfNotNullOrEmpty(element, "sizes", sizesDataValue);
-					var srcsetDataValue = getData(element, srcsetDataName);
-					setAttributeIfNotNullOrEmpty(element, "srcset", srcsetDataValue, mustChangeToWebP);
-					setAttributeIfNotNullOrEmpty(element, "src", srcDataValue, mustChangeToWebP);
-					break;
-				}
-			case "IFRAME":
-				setAttributeIfNotNullOrEmpty(element, "src", srcDataValue);
-				break;
-			case "VIDEO":
-				setSourcesInChildren(element, "src", srcDataName);
-				setAttributeIfNotNullOrEmpty(element, "src", srcDataValue);
-				break;
-			default:
-				if (srcDataValue) {
-					var setValue = replaceExtToWebp(srcDataValue, mustChangeToWebP);
-					element.style.backgroundImage = 'url("' + setValue + '")';
-				}
+
+		setSourcesInChildren(element, "src", srcDataName);
+		setAttributeIfValue(element, "src", srcDataValue);
+	};
+
+	var setSourcesBgImage = function setSourcesBgImage(element, settings) {
+		var toWebpFlag = supportsWebp && settings.to_webp;
+		var srcDataValue = getData(element, settings.data_src);
+
+		if (srcDataValue) {
+			var setValue = replaceExtToWebp(srcDataValue, toWebpFlag);
+			element.style.backgroundImage = 'url("' + setValue + '")';
 		}
-	}
+	};
 
+	var setSourcesFunctions = {
+		IMG: setSourcesImg,
+		IFRAME: setSourcesIframe,
+		VIDEO: setSourcesVideo
+	};
+
+	var setSources = function setSources(element, settings) {
+		var tagName = element.tagName;
+		var setSourcesFunction = setSourcesFunctions[tagName];
+		if (setSourcesFunction) {
+			setSourcesFunction(element, settings);
+			return;
+		}
+		setSourcesBgImage(element, settings);
+	};
+
 	var addClass = function addClass(element, className) {
@@ -408,6 +426,5 @@ if (supportsClassList) {
 
-	/* Automatic instances creation if required (useful for async script loading!) */
-	var autoInitOptions = window.lazyLoadOptions;
-	if (runningOnBrowser && autoInitOptions) {
-		autoInitialize(LazyLoad, autoInitOptions);
+	/* Automatic instances creation if required (useful for async script loading) */
+	if (runningOnBrowser) {
+		autoInitialize(LazyLoad, window.lazyLoadOptions);
 	}
@@ -414,0 +431,0 @@

dist/lazyload.min.js

@@ -1,2 +0,2 @@
-var _extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};!function(e,t){"object"===("undefined"==typeof exports?"undefined":_typeof(exports))&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.LazyLoad=t()}(this,function(){"use strict";function e(e,t,n){return!(s(e,t,n)||a(e,t,n)||l(e,t,n)||c(e,t,n))}function t(e,t){var n=t.data_sizes,o=t.data_srcset,i=t.data_src,s=d(e,i),r=v&&t.to_webp;switch(e.tagName){case"IMG":var l=e.parentNode;l&&"PICTURE"===l.tagName&&w(l,"srcset",o,r);var a=d(e,n);y(e,"sizes",a);var c=d(e,o);y(e,"srcset",c,r),y(e,"src",s,r);break;case"IFRAME":y(e,"src",s);break;case"VIDEO":w(e,"src",i),y(e,"src",s);break;default:if(s){var u=b(s,r);e.style.backgroundImage='url("'+u+'")'}}}var n=function(){return{elements_selector:"img",container:window,threshold:300,throttle:150,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_initial:"initial",skip_invisible:!0,callback_load:null,callback_error:null,callback_set:null,callback_processed:null,callback_enter:null,to_webp:!1}},o=function(e,t){e&&e(t)},i=function(e){return e.getBoundingClientRect().top+window.pageYOffset-e.ownerDocument.documentElement.clientTop},s=function(e,t,n){return(t===window?window.innerHeight+window.pageYOffset:i(t)+t.offsetHeight)<=i(e)-n},r=function(e){return e.getBoundingClientRect().left+window.pageXOffset-e.ownerDocument.documentElement.clientLeft},l=function(e,t,n){var o=window.innerWidth;return(t===window?o+window.pageXOffset:r(t)+o)<=r(e)-n},a=function(e,t,n){return(t===window?window.pageYOffset:i(t))>=i(e)+n+e.offsetHeight},c=function(e,t,n){return(t===window?window.pageXOffset:r(t))>=r(e)+n+e.offsetWidth},u=function(e,t){var n,o=new e(t);try{n=new CustomEvent("LazyLoad::Initialized",{detail:{instance:o}})}catch(e){(n=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:o})}window.dispatchEvent(n)},d=function(e,t){return e.getAttribute("data-"+t)},f=function(e,t,n){return e.setAttribute("data-"+t,n)},h=function(e){return f(e,"was-processed","true")},p=function(e){return"true"===d(e,"was-processed")},_="undefined"!=typeof window,m=_&&!("onscroll"in window)||/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),g=_&&"classList"in document.createElement("p"),v=function(){if(!_)return!1;var e=document.createElement("canvas");return!(!e.getContext||!e.getContext("2d"))&&0===e.toDataURL("image/webp").indexOf("data:image/webp")}(),w=function(e,t,n,o){for(var i,s=0;i=e.children[s];s+=1)if("SOURCE"===i.tagName){var r=d(i,n);y(i,t,r,o)}},b=function(e,t){return t?e.replace(/\.(jpe?g|png)/gi,".webp"):e},y=function(e,t,n,o){n&&e.setAttribute(t,b(n,o))},E=function(e,t){g?e.classList.add(t):e.className+=(e.className?" ":"")+t},L=function(e,t){g?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},T=function(e){this._settings=_extends({},n(),e),this._queryOriginNode=this._settings.container===window?document:this._settings.container,this._previousLoopTime=0,this._loopTimeout=null,this._boundHandleScroll=this.handleScroll.bind(this),this._isFirstLoop=!0,window.addEventListener("resize",this._boundHandleScroll),this.update()};T.prototype={_reveal:function(e,n){if(n||!p(e)){var i=this._settings,s=function t(){i&&(e.removeEventListener("load",r),e.removeEventListener("error",t),L(e,i.class_loading),E(e,i.class_error),o(i.callback_error,e))},r=function t(){i&&(L(e,i.class_loading),E(e,i.class_loaded),e.removeEventListener("load",t),e.removeEventListener("error",s),o(i.callback_load,e))};o(i.callback_enter,e),["IMG","IFRAME","VIDEO"].indexOf(e.tagName)>-1&&(e.addEventListener("load",r),e.addEventListener("error",s),E(e,i.class_loading)),t(e,i),o(i.callback_set,e)}},_loopThroughElements:function(t){var n=this._settings,i=this._elements,s=i?i.length:0,r=void 0,l=[],a=this._isFirstLoop;for(r=0;r<s;r++){var c=i[r];n.skip_invisible&&null===c.offsetParent||(m||t||e(c,n.container,n.threshold))&&(a&&E(c,n.class_initial),this.load(c),l.push(r),h(c))}for(;l.length;)i.splice(l.pop(),1),o(n.callback_processed,i.length);0===s&&this._stopScrollHandler(),a&&(this._isFirstLoop=!1)},_purgeElements:function(){var e=this._elements,t=e.length,n=void 0,o=[];for(n=0;n<t;n++){var i=e[n];p(i)&&o.push(n)}for(;o.length>0;)e.splice(o.pop(),1)},_startScrollHandler:function(){this._isHandlingScroll||(this._isHandlingScroll=!0,this._settings.container.addEventListener("scroll",this._boundHandleScroll))},_stopScrollHandler:function(){this._isHandlingScroll&&(this._isHandlingScroll=!1,this._settings.container.removeEventListener("scroll",this._boundHandleScroll))},handleScroll:function(){var e=this._settings.throttle;if(0!==e){var t=Date.now(),n=e-(t-this._previousLoopTime);n<=0||n>e?(this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._previousLoopTime=t,this._loopThroughElements()):this._loopTimeout||(this._loopTimeout=setTimeout(function(){this._previousLoopTime=Date.now(),this._loopTimeout=null,this._loopThroughElements()}.bind(this),n))}else this._loopThroughElements()},loadAll:function(){this._loopThroughElements(!0)},update:function(){this._elements=Array.prototype.slice.call(this._queryOriginNode.querySelectorAll(this._settings.elements_selector)),this._purgeElements(),this._loopThroughElements(),this._startScrollHandler()},destroy:function(){window.removeEventListener("resize",this._boundHandleScroll),this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._stopScrollHandler(),this._elements=null,this._queryOriginNode=null,this._settings=null},load:function(e,t){this._reveal(e,t)}};var S=window.lazyLoadOptions;return _&&S&&function(e,t){var n=t.length;if(n)for(var o=0;o<n;o++)u(e,t[o]);else u(e,t)}(T,S),T});
+var _extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};!function(e,t){"object"===("undefined"==typeof exports?"undefined":_typeof(exports))&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.LazyLoad=t()}(this,function(){"use strict";function e(e,t,n){return!(i(e,t,n)||l(e,t,n)||r(e,t,n)||a(e,t,n))}var t=function(){return{elements_selector:"img",container:window,threshold:300,throttle:150,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_initial:"initial",skip_invisible:!0,callback_load:null,callback_error:null,callback_set:null,callback_processed:null,callback_enter:null,to_webp:!1}},n=function(e,t){e&&e(t)},o=function(e){return e.getBoundingClientRect().top+window.pageYOffset-e.ownerDocument.documentElement.clientTop},i=function(e,t,n){return(t===window?window.innerHeight+window.pageYOffset:o(t)+t.offsetHeight)<=o(e)-n},s=function(e){return e.getBoundingClientRect().left+window.pageXOffset-e.ownerDocument.documentElement.clientLeft},r=function(e,t,n){var o=window.innerWidth;return(t===window?o+window.pageXOffset:s(t)+o)<=s(e)-n},l=function(e,t,n){return(t===window?window.pageYOffset:o(t))>=o(e)+n+e.offsetHeight},a=function(e,t,n){return(t===window?window.pageXOffset:s(t))>=s(e)+n+e.offsetWidth},c=function(e,t){var n,o=new e(t);try{n=new CustomEvent("LazyLoad::Initialized",{detail:{instance:o}})}catch(e){(n=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:o})}window.dispatchEvent(n)},u=function(e,t){return e.getAttribute("data-"+t)},d=function(e,t,n){return e.setAttribute("data-"+t,n)},f=function(e){return d(e,"was-processed","true")},_=function(e){return"true"===u(e,"was-processed")},h=function(e,t){return t?e.replace(/\.(jpe?g|png)/gi,".webp"):e},p="undefined"!=typeof window,m=p&&!("onscroll"in window)||/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),g=p&&"classList"in document.createElement("p"),v=p&&function(){var e=document.createElement("canvas");return!(!e.getContext||!e.getContext("2d"))&&0===e.toDataURL("image/webp").indexOf("data:image/webp")}(),w=function(e,t,n,o){for(var i,s=0;i=e.children[s];s+=1)if("SOURCE"===i.tagName){var r=u(i,n);b(i,t,r,o)}},b=function(e,t,n,o){n&&e.setAttribute(t,h(n,o))},y=function(e,t){var n=v&&t.to_webp,o=u(e,t.data_src);if(o){var i=h(o,n);e.style.backgroundImage='url("'+i+'")'}},E={IMG:function(e,t){var n=v&&t.to_webp,o=t.data_srcset,i=e.parentNode;i&&"PICTURE"===i.tagName&&w(i,"srcset",o,n);var s=u(e,t.data_sizes);b(e,"sizes",s);var r=u(e,o);b(e,"srcset",r,n);var l=u(e,t.data_src);b(e,"src",l,n)},IFRAME:function(e,t){var n=u(e,t.data_src);b(e,"src",n)},VIDEO:function(e,t){var n=t.data_src,o=u(e,n);w(e,"src",n),b(e,"src",o)}},L=function(e,t){var n=e.tagName,o=E[n];o?o(e,t):y(e,t)},T=function(e,t){g?e.classList.add(t):e.className+=(e.className?" ":"")+t},S=function(e,t){g?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},O=function(e){this._settings=_extends({},t(),e),this._queryOriginNode=this._settings.container===window?document:this._settings.container,this._previousLoopTime=0,this._loopTimeout=null,this._boundHandleScroll=this.handleScroll.bind(this),this._isFirstLoop=!0,window.addEventListener("resize",this._boundHandleScroll),this.update()};return O.prototype={_reveal:function(e,t){if(t||!_(e)){var o=this._settings,i=function t(){o&&(e.removeEventListener("load",s),e.removeEventListener("error",t),S(e,o.class_loading),T(e,o.class_error),n(o.callback_error,e))},s=function t(){o&&(S(e,o.class_loading),T(e,o.class_loaded),e.removeEventListener("load",t),e.removeEventListener("error",i),n(o.callback_load,e))};n(o.callback_enter,e),["IMG","IFRAME","VIDEO"].indexOf(e.tagName)>-1&&(e.addEventListener("load",s),e.addEventListener("error",i),T(e,o.class_loading)),L(e,o),n(o.callback_set,e)}},_loopThroughElements:function(t){var o=this._settings,i=this._elements,s=i?i.length:0,r=void 0,l=[],a=this._isFirstLoop;for(r=0;r<s;r++){var c=i[r];o.skip_invisible&&null===c.offsetParent||(m||t||e(c,o.container,o.threshold))&&(a&&T(c,o.class_initial),this.load(c),l.push(r),f(c))}for(;l.length;)i.splice(l.pop(),1),n(o.callback_processed,i.length);0===s&&this._stopScrollHandler(),a&&(this._isFirstLoop=!1)},_purgeElements:function(){var e=this._elements,t=e.length,n=void 0,o=[];for(n=0;n<t;n++){var i=e[n];_(i)&&o.push(n)}for(;o.length>0;)e.splice(o.pop(),1)},_startScrollHandler:function(){this._isHandlingScroll||(this._isHandlingScroll=!0,this._settings.container.addEventListener("scroll",this._boundHandleScroll))},_stopScrollHandler:function(){this._isHandlingScroll&&(this._isHandlingScroll=!1,this._settings.container.removeEventListener("scroll",this._boundHandleScroll))},handleScroll:function(){var e=this._settings.throttle;if(0!==e){var t=Date.now(),n=e-(t-this._previousLoopTime);n<=0||n>e?(this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._previousLoopTime=t,this._loopThroughElements()):this._loopTimeout||(this._loopTimeout=setTimeout(function(){this._previousLoopTime=Date.now(),this._loopTimeout=null,this._loopThroughElements()}.bind(this),n))}else this._loopThroughElements()},loadAll:function(){this._loopThroughElements(!0)},update:function(){this._elements=Array.prototype.slice.call(this._queryOriginNode.querySelectorAll(this._settings.elements_selector)),this._purgeElements(),this._loopThroughElements(),this._startScrollHandler()},destroy:function(){window.removeEventListener("resize",this._boundHandleScroll),this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._stopScrollHandler(),this._elements=null,this._queryOriginNode=null,this._settings=null},load:function(e,t){this._reveal(e,t)}},p&&function(e,t){if(t)if(t.length)for(var n,o=0;n=t[o];o+=1)c(e,n);else c(e,t)}(O,window.lazyLoadOptions),O});
 //# sourceMappingURL=lazyload.min.js.map

package.json

 {
 	"name": "vanilla-lazyload",
-	"version": "8.14.0",
+	"version": "8.15.0",
 	"description": "A fast, lightweight script to load images as they enter the viewport. SEO friendly, it supports responsive images (both srcset + sizes and picture) and progressive JPEG",
 	"main": "dist/lazyload.min.js",
 	"module": "dist/lazyload.es2015.js",
-	"browser": "dist/lazyload.iife.min.js",
 	"devDependencies": {
@@ -9,0 +8,0 @@ "babel-core": "^6.26.0",

README.md

@@ -15,3 +15,3 @@ LazyLoad is a fast, lightweight and flexible script that _speeds up your web application_ by **loading images, video or iframes as they enter the viewport**. It's written in plain "vanilla" JavaScript, uses [Intersection Observers](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API), and supports [responsive images](https://alistapart.com/article/responsive-images-in-practice). It's also SEO-friendly and it has some other [notable features](#notable-features).
 ```html
-<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/8.14.0/lazyload.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/8.15.0/lazyload.min.js"></script>
 ```
@@ -24,3 +24,3 @@
 ```html
-<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/10.14.0/lazyload.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/10.15.0/lazyload.min.js"></script>
 ```
@@ -37,3 +37,3 @@
 	var s = d.createElement("script"); s.async = true;
-	var v = !("IntersectionObserver" in w) ? "8.14.0" : "10.14.0";
+	var v = !("IntersectionObserver" in w) ? "8.15.0" : "10.15.0";
 	s.src = "https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/" + v + "/lazyload.min.js";
@@ -54,6 +54,6 @@ w.lazyLoadOptions = {}; // Your options here. See "recipes" for more information about async.
 - **install it with npm**
-  Recommended version `npm install vanilla-lazyload@8.14.0`
+  Recommended version `npm install vanilla-lazyload@8.15.0`
   Latest version `npm install vanilla-lazyload`
 - **install it with bower**
-  Recommended version `bower install vanilla-lazyload#8.14.0`
+  Recommended version `bower install vanilla-lazyload#8.15.0`
   Latest version `bower install vanilla-lazyload`
@@ -277,3 +277,3 @@
 ```html
-<div id="scrollingPanel">
+<div class="scrollingPanel">
     <img alt="Image description" 
@@ -286,2 +286,11 @@ data-src="../img/44721746JJ_15_a.jpg"
 
+CSS
+
+```css
+.scrollingPanel {
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+}
+```
+
 Javascript
@@ -304,3 +313,3 @@
 ```html
-<div id="scrollingPanel1">
+<div id="scrollingPanel1" class="scrollingPanel">
     <img alt="Image description" 
@@ -311,3 +320,3 @@ data-src="../img/44721746JJ_15_a.jpg"
 </div>
-<div id="scrollingPanel2">
+<div id="scrollingPanel2" class="scrollingPanel">
     <img alt="Image description" 
@@ -320,2 +329,11 @@ data-src="../img/44721746JJ_15_a.jpg"
 
+CSS
+
+```css
+.scrollingPanel {
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+}
+```
+
 Javascript
@@ -322,0 +340,0 @@

src/lazyload.autoInitialize.js

 /* Creates instance and notifies it through the window element */
-const createInstance = function (classObj, options) { 
-    var event;
-    let eventString = "LazyLoad::Initialized";
-    let instance = new classObj(options);
-    try {
-        // Works in modern browsers
-        event = new CustomEvent(eventString, { detail: { instance } });
-    } 
-    catch(err) {
-        // Works in Internet Explorer (all versions)
-        event = document.createEvent("CustomEvent");
-        event.initCustomEvent(eventString, false, false, { instance });
-    }
-    window.dispatchEvent(event);
+const createInstance = function(classObj, options) {
+	var event;
+	let eventString = "LazyLoad::Initialized";
+	let instance = new classObj(options);
+	try {
+		// Works in modern browsers
+		event = new CustomEvent(eventString, { detail: { instance } });
+	} catch (err) {
+		// Works in Internet Explorer (all versions)
+		event = document.createEvent("CustomEvent");
+		event.initCustomEvent(eventString, false, false, { instance });
+	}
+	window.dispatchEvent(event);
 };
@@ -20,14 +19,15 @@
     options passed in (plain object or an array) */
-export default function (classObj, options) { 
-    let optsLength = options.length;
-    if (!optsLength) {
-        // Plain object
-        createInstance(classObj, options);
-    }
-    else {
-        // Array of objects
-        for (let i = 0; i < optsLength; i++) {
-            createInstance(classObj, options[i]);
-        }
-    }
-};
+export default function(classObj, options) {
+	if (!options) {
+		return;
+	}
+	if (!options.length) {
+		// Plain object
+		createInstance(classObj, options);
+	} else {
+		// Array of objects
+		for (let i = 0, optionsItem; (optionsItem = options[i]); i += 1) {
+			createInstance(classObj, optionsItem);
+		}
+	}
+}

src/lazyload.class.js

@@ -1,17 +0,20 @@
-import {supportsClassList} from "./lazyload.environment";
+import { supportsClassList } from "./lazyload.environment";
 
 export const addClass = (element, className) => {
-    if (supportsClassList) {
-        element.classList.add(className);
-        return;
-    }
-    element.className += (element.className ? " " : "") + className;
+	if (supportsClassList) {
+		element.classList.add(className);
+		return;
+	}
+	element.className += (element.className ? " " : "") + className;
 };
 
 export const removeClass = (element, className) => {
-    if (supportsClassList) {
-        element.classList.remove(className);
-        return;
-    }
-    element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ").replace(/^\s+/, "").replace(/\s+$/, "");
+	if (supportsClassList) {
+		element.classList.remove(className);
+		return;
+	}
+	element.className = element.className.
+		replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ").
+		replace(/^\s+/, "").
+		replace(/\s+$/, "");
 };

src/lazyload.environment.js

@@ -0,1 +1,3 @@
+import { detectWebp } from "./lazyload.webp";
+
 export const runningOnBrowser = typeof window !== "undefined";
@@ -9,17 +11,2 @@
 
-export const detectWebP = () => {
-	if (!runningOnBrowser) {
-		return false;
-	}
-
-	var webPString = "image/webp";
-	var elem = document.createElement("canvas");
-
-	if (elem.getContext && elem.getContext("2d")) {
-		return elem.toDataURL(webPString).indexOf("data:" + webPString) === 0;
-	}
-
-	return false;
-};
-
-export const supportsWebP = detectWebP();
+export const supportsWebp = runningOnBrowser && detectWebp();

src/lazyload.js

@@ -5,3 +5,3 @@ import getDefaultSettings from "./lazyload.defaults";
 import autoInitialize from "./lazyload.autoInitialize";
-import setSources from "./lazyload.setSources";
+import { setSources } from "./lazyload.setSources";
 import { addClass, removeClass } from "./lazyload.class";
@@ -222,8 +222,7 @@ import { getWasProcessed, setWasProcessed } from "./lazyload.data";
 
-/* Automatic instances creation if required (useful for async script loading!) */
-let autoInitOptions = window.lazyLoadOptions;
-if (runningOnBrowser && autoInitOptions) {
-	autoInitialize(LazyLoad, autoInitOptions);
+/* Automatic instances creation if required (useful for async script loading) */
+if (runningOnBrowser) {
+	autoInitialize(LazyLoad, window.lazyLoadOptions);
 }
 
 export default LazyLoad;

src/lazyload.setSources.js

 import { getData } from "./lazyload.data";
-import { supportsWebP } from "./lazyload.environment";
+import { supportsWebp } from "./lazyload.environment";
+import { replaceExtToWebp } from "./lazyload.webp";
 
@@ -8,3 +9,3 @@ export const setSourcesInChildren = function(
 	dataAttrName,
-	toWebP
+	toWebpFlag
 ) {
@@ -14,3 +15,3 @@ for (let i = 0, childTag; (childTag = parentTag.children[i]); i += 1) {
 			let attrValue = getData(childTag, dataAttrName);
-			setAttributeIfNotNullOrEmpty(childTag, attrName, attrValue, toWebP);
+			setAttributeIfValue(childTag, attrName, attrValue, toWebpFlag);
 		}
@@ -20,10 +21,7 @@ }
 
-const replaceExtToWebp = (value, condition) =>
-	condition ? value.replace(/\.(jpe?g|png)/gi, ".webp") : value;
-
-export const setAttributeIfNotNullOrEmpty = function(
+export const setAttributeIfValue = function(
 	element,
 	attrName,
 	value,
-	toWebP
+	toWebpFlag
 ) {
@@ -33,54 +31,59 @@ if (!value) {
 	}
-	element.setAttribute(attrName, replaceExtToWebp(value, toWebP));
+	element.setAttribute(attrName, replaceExtToWebp(value, toWebpFlag));
 };
 
-export default function setSources(element, settings) {
-	const {
-		data_sizes: sizesDataName,
-		data_srcset: srcsetDataName,
-		data_src: srcDataName
-	} = settings;
+export const setSourcesImg = (element, settings) => {
+	const toWebpFlag = supportsWebp && settings.to_webp;
+	const srcsetDataName = settings.data_srcset;
+	const parent = element.parentNode;
+
+	if (parent && parent.tagName === "PICTURE") {
+		setSourcesInChildren(parent, "srcset", srcsetDataName, toWebpFlag);
+	}
+	const sizesDataValue = getData(element, settings.data_sizes);
+	setAttributeIfValue(element, "sizes", sizesDataValue);
+	const srcsetDataValue = getData(element, srcsetDataName);
+	setAttributeIfValue(element, "srcset", srcsetDataValue, toWebpFlag);
+	const srcDataValue = getData(element, settings.data_src);
+	setAttributeIfValue(element, "src", srcDataValue, toWebpFlag);
+};
+
+export const setSourcesIframe = (element, settings) => {
+	const srcDataValue = getData(element, settings.data_src);
+
+	setAttributeIfValue(element, "src", srcDataValue);
+};
+
+export const setSourcesVideo = (element, settings) => {
+	const srcDataName = settings.data_src;
 	const srcDataValue = getData(element, srcDataName);
-	const mustChangeToWebP = supportsWebP && settings.to_webp;
-	switch (element.tagName) {
-		case "IMG": {
-			const parent = element.parentNode;
-			if (parent && parent.tagName === "PICTURE") {
-				setSourcesInChildren(
-					parent,
-					"srcset",
-					srcsetDataName,
-					mustChangeToWebP
-				);
-			}
-			const sizesDataValue = getData(element, sizesDataName);
-			setAttributeIfNotNullOrEmpty(element, "sizes", sizesDataValue);
-			const srcsetDataValue = getData(element, srcsetDataName);
-			setAttributeIfNotNullOrEmpty(
-				element,
-				"srcset",
-				srcsetDataValue,
-				mustChangeToWebP
-			);
-			setAttributeIfNotNullOrEmpty(
-				element,
-				"src",
-				srcDataValue,
-				mustChangeToWebP
-			);
-			break;
-		}
-		case "IFRAME":
-			setAttributeIfNotNullOrEmpty(element, "src", srcDataValue);
-			break;
-		case "VIDEO":
-			setSourcesInChildren(element, "src", srcDataName);
-			setAttributeIfNotNullOrEmpty(element, "src", srcDataValue);
-			break;
-		default:
-			if (srcDataValue) {
-				let setValue = replaceExtToWebp(srcDataValue, mustChangeToWebP);
-				element.style.backgroundImage = `url("${setValue}")`;
-			}
+
+	setSourcesInChildren(element, "src", srcDataName);
+	setAttributeIfValue(element, "src", srcDataValue);
+};
+
+export const setSourcesBgImage = (element, settings) => {
+	const toWebpFlag = supportsWebp && settings.to_webp;
+	const srcDataValue = getData(element, settings.data_src);
+
+	if (srcDataValue) {
+		let setValue = replaceExtToWebp(srcDataValue, toWebpFlag);
+		element.style.backgroundImage = `url("${setValue}")`;
 	}
-}
+};
+
+const setSourcesFunctions = {
+	IMG: setSourcesImg,
+	IFRAME: setSourcesIframe,
+	VIDEO: setSourcesVideo
+};
+
+export const setSources = (element, settings) => {
+	const tagName = element.tagName;
+	const setSourcesFunction = setSourcesFunctions[tagName];
+	if (setSourcesFunction) {
+		setSourcesFunction(element, settings);
+		return;
+	}
+	setSourcesBgImage(element, settings);
+};

No alert changes

Improved metrics

Total package byte prevSize

1091280

increased by0.48%

Number of package files

142

increased by1.43%

Lines of code

2267

increased by1.07%

Number of lines in readme file

630

increased by2.94%

No dependency changes