vanilla-lazyload - npm Package Compare versions

Comparing version 10.14.0 to 10.15.0

.eslintrc.json

@@ -77,3 +77,3 @@ {
 		"require-await": 1,
-		"vars-on-top": 0,
+		"vars-on-top": 1,
 		"wrap-iife": 1,
@@ -80,0 +80,0 @@ "yoda": 1

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
@@ -144,2 +149,6 @@
 
+#### 8.14.0
+
+Now supporting WebP through dynamic extension rename if the user browser is compatible.
+
 #### 8.13.0
@@ -146,0 +155,0 @@

dist/lazyload.amd.js

@@ -86,2 +86,17 @@ 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; };
 
+	var replaceExtToWebp = function replaceExtToWebp(value, condition) {
+		return condition ? value.replace(/\.(jpe?g|png)/gi, ".webp") : value;
+	};
+
+	var detectWebp = function 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;
+	};
+
 	var runningOnBrowser = typeof window !== "undefined";
@@ -95,24 +110,9 @@
 
-	var detectWebP = function detectWebP() {
-		if (!runningOnBrowser) {
-			return false;
-		}
+	var 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;
-	};
-
-	var supportsWebP = detectWebP();
-
-	var setSourcesInChildren = function setSourcesInChildren(parentTag, attrName, dataAttrName, toWebP) {
+	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);
 			}
@@ -122,49 +122,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));
 	};
 
-	var setSources = 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) {
@@ -186,2 +202,4 @@ if (supportsClassList) {
 
+	var managedTags = ["IMG", "IFRAME", "VIDEO"];
+
 	var callCallback = function callCallback(callback, argument) {
@@ -226,3 +244,3 @@ if (callback) {
 		callCallback(settings.callback_enter, element);
-		if (["IMG", "IFRAME", "VIDEO"].indexOf(element.tagName) > -1) {
+		if (managedTags.indexOf(element.tagName) > -1) {
 			addOneShotListeners(element, settings);
@@ -229,0 +247,0 @@ addClass(element, settings.class_loading);

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 r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e};define(function(){"use strict";function e(e){return e.filter(function(e){return!i(e)})}function t(e,t,n){!n&&i(e)||(p(t.callback_enter,e),["IMG","IFRAME","VIDEO"].indexOf(e.tagName)>-1&&(E(e,t),g(e,t.class_loading)),b(e,t),a(e),p(t.callback_set,e))}var n=function(e){var t={elements_selector:"img",container:document,threshold:300,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",class_loading:"loading",class_loaded:"loaded",class_error:"error",callback_load:null,callback_error:null,callback_set:null,callback_enter:null,to_webp:!1};return _extends({},t,e)},r=function(e,t){return e.getAttribute("data-"+t)},s=function(e,t,n){return e.setAttribute("data-"+t,n)},a=function(e){return s(e,"was-processed","true")},i=function(e){return"true"===r(e,"was-processed")},o=function(e,t){var n,r=new e(t);try{n=new CustomEvent("LazyLoad::Initialized",{detail:{instance:r}})}catch(e){(n=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:r})}window.dispatchEvent(n)},c="undefined"!=typeof window,l=c&&!("onscroll"in window)||/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),u=c&&"IntersectionObserver"in window,d=c&&"classList"in document.createElement("p"),f=function(){if(!c)return!1;var e=document.createElement("canvas");return!(!e.getContext||!e.getContext("2d"))&&0===e.toDataURL("image/webp").indexOf("data:image/webp")}(),v=function(e,t,n,s){for(var a,i=0;a=e.children[i];i+=1)if("SOURCE"===a.tagName){var o=r(a,n);h(a,t,o,s)}},_=function(e,t){return t?e.replace(/\.(jpe?g|png)/gi,".webp"):e},h=function(e,t,n,r){n&&e.setAttribute(t,_(n,r))},b=function(e,t){var n=t.data_sizes,s=t.data_srcset,a=t.data_src,i=r(e,a),o=f&&t.to_webp;switch(e.tagName){case"IMG":var c=e.parentNode;c&&"PICTURE"===c.tagName&&v(c,"srcset",s,o);var l=r(e,n);h(e,"sizes",l);var u=r(e,s);h(e,"srcset",u,o),h(e,"src",i,o);break;case"IFRAME":h(e,"src",i);break;case"VIDEO":v(e,"src",a),h(e,"src",i);break;default:if(i){var d=_(i,o);e.style.backgroundImage='url("'+d+'")'}}},g=function(e,t){d?e.classList.add(t):e.className+=(e.className?" ":"")+t},m=function(e,t){d?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},p=function(e,t){e&&e(t)},w=function(e,t,n){e.removeEventListener("load",t),e.removeEventListener("error",n)},E=function(e,t){var n=function n(s){y(s,!0,t),w(e,n,r)},r=function r(s){y(s,!1,t),w(e,n,r)};e.addEventListener("load",n),e.addEventListener("error",r)},y=function(e,t,n){var r=e.target;m(r,n.class_loading),g(r,t?n.class_loaded:n.class_error),p(t?n.callback_load:n.callback_error,r)},I=function(e){return e.isIntersecting||e.intersectionRatio>0},L=function(e){return{root:e.container===document?null:e.container,rootMargin:e.threshold+"px"}},O=function(e,t){this._settings=n(e),this._setObserver(),this.update(t)};return O.prototype={_setObserver:function(){var t=this;if(u){this._observer=new IntersectionObserver(function(n){n.forEach(function(e){if(I(e)){var n=e.target;t.load(n),t._observer.unobserve(n)}}),t._elements=e(t._elements)},L(this._settings))}},loadAll:function(){var t=this;this._elements.forEach(function(e){t.load(e)}),this._elements=e(this._elements)},update:function(t){var n=this,r=this._settings,s=t||r.container.querySelectorAll(r.elements_selector);this._elements=e(Array.prototype.slice.call(s)),!l&&this._observer?this._elements.forEach(function(e){n._observer.observe(e)}):this.loadAll()},destroy:function(){var t=this;this._observer&&(e(this._elements).forEach(function(e){t._observer.unobserve(e)}),this._observer=null),this._elements=null,this._settings=null},load:function(e,n){t(e,this._settings,n)}},c&&function(e,t){if(t)if(t.length)for(var n,r=0;n=t[r];r+=1)o(e,n);else o(e,t)}(O,window.lazyLoadOptions),O});
+var _extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e};define(function(){"use strict";function e(e){return e.filter(function(e){return!i(e)})}function t(e,t,n){!n&&i(e)||(y(t.callback_enter,e),E.indexOf(e.tagName)>-1&&(L(e,t),p(e,t.class_loading)),b(e,t),a(e),y(t.callback_set,e))}var n=function(e){var t={elements_selector:"img",container:document,threshold:300,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",class_loading:"loading",class_loaded:"loaded",class_error:"error",callback_load:null,callback_error:null,callback_set:null,callback_enter:null,to_webp:!1};return _extends({},t,e)},r=function(e,t){return e.getAttribute("data-"+t)},s=function(e,t,n){return e.setAttribute("data-"+t,n)},a=function(e){return s(e,"was-processed","true")},i=function(e){return"true"===r(e,"was-processed")},o=function(e,t){var n,r=new e(t);try{n=new CustomEvent("LazyLoad::Initialized",{detail:{instance:r}})}catch(e){(n=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:r})}window.dispatchEvent(n)},c=function(e,t){return t?e.replace(/\.(jpe?g|png)/gi,".webp"):e},l="undefined"!=typeof window,u=l&&!("onscroll"in window)||/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),d=l&&"IntersectionObserver"in window,f=l&&"classList"in document.createElement("p"),v=l&&function(){var e=document.createElement("canvas");return!(!e.getContext||!e.getContext("2d"))&&0===e.toDataURL("image/webp").indexOf("data:image/webp")}(),_=function(e,t,n,s){for(var a,i=0;a=e.children[i];i+=1)if("SOURCE"===a.tagName){var o=r(a,n);h(a,t,o,s)}},h=function(e,t,n,r){n&&e.setAttribute(t,c(n,r))},g=function(e,t){var n=v&&t.to_webp,s=r(e,t.data_src);if(s){var a=c(s,n);e.style.backgroundImage='url("'+a+'")'}},m={IMG:function(e,t){var n=v&&t.to_webp,s=t.data_srcset,a=e.parentNode;a&&"PICTURE"===a.tagName&&_(a,"srcset",s,n);var i=r(e,t.data_sizes);h(e,"sizes",i);var o=r(e,s);h(e,"srcset",o,n);var c=r(e,t.data_src);h(e,"src",c,n)},IFRAME:function(e,t){var n=r(e,t.data_src);h(e,"src",n)},VIDEO:function(e,t){var n=t.data_src,s=r(e,n);_(e,"src",n),h(e,"src",s)}},b=function(e,t){var n=e.tagName,r=m[n];r?r(e,t):g(e,t)},p=function(e,t){f?e.classList.add(t):e.className+=(e.className?" ":"")+t},w=function(e,t){f?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},E=["IMG","IFRAME","VIDEO"],y=function(e,t){e&&e(t)},I=function(e,t,n){e.removeEventListener("load",t),e.removeEventListener("error",n)},L=function(e,t){var n=function n(s){O(s,!0,t),I(e,n,r)},r=function r(s){O(s,!1,t),I(e,n,r)};e.addEventListener("load",n),e.addEventListener("error",r)},O=function(e,t,n){var r=e.target;w(r,n.class_loading),p(r,t?n.class_loaded:n.class_error),y(t?n.callback_load:n.callback_error,r)},A=function(e){return e.isIntersecting||e.intersectionRatio>0},k=function(e){return{root:e.container===document?null:e.container,rootMargin:e.threshold+"px"}},z=function(e,t){this._settings=n(e),this._setObserver(),this.update(t)};return z.prototype={_setObserver:function(){var t=this;if(d){this._observer=new IntersectionObserver(function(n){n.forEach(function(e){if(A(e)){var n=e.target;t.load(n),t._observer.unobserve(n)}}),t._elements=e(t._elements)},k(this._settings))}},loadAll:function(){var t=this;this._elements.forEach(function(e){t.load(e)}),this._elements=e(this._elements)},update:function(t){var n=this,r=this._settings,s=t||r.container.querySelectorAll(r.elements_selector);this._elements=e(Array.prototype.slice.call(s)),!u&&this._observer?this._elements.forEach(function(e){n._observer.observe(e)}):this.loadAll()},destroy:function(){var t=this;this._observer&&(e(this._elements).forEach(function(e){t._observer.unobserve(e)}),this._observer=null),this._elements=null,this._settings=null},load:function(e,n){t(e,this._settings,n)}},l&&function(e,t){if(t)if(t.length)for(var n,r=0;n=t[r];r+=1)o(e,n);else o(e,t)}(z,window.lazyLoadOptions),z});
 //# sourceMappingURL=lazyload.amd.min.js.map

dist/lazyload.es2015.js

@@ -77,2 +77,16 @@ var getInstanceSettings = customSettings => {
 
+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";
@@ -90,19 +104,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(
@@ -112,3 +111,3 @@ parentTag,
 	dataAttrName,
-	toWebP
+	toWebpFlag
 ) {
@@ -118,3 +117,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);
 		}
@@ -124,10 +123,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
 ) {
@@ -137,56 +133,61 @@ if (!value) {
 	}
-	element.setAttribute(attrName, replaceExtToWebp(value, toWebP));
+	element.setAttribute(attrName, replaceExtToWebp(value, toWebpFlag));
 };
 
-const setSources = function(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) => {
@@ -211,2 +212,4 @@ if (supportsClassList) {
 
+const managedTags = ["IMG", "IFRAME", "VIDEO"];
+
 const callCallback = function(callback, argument) {
@@ -254,3 +257,3 @@ if (callback) {
 	callCallback(settings.callback_enter, element);
-	if (["IMG", "IFRAME", "VIDEO"].indexOf(element.tagName) > -1) {
+	if (managedTags.indexOf(element.tagName) > -1) {
 		addOneShotListeners(element, settings);
@@ -257,0 +260,0 @@ addClass(element, settings.class_loading);

dist/lazyload.iife.js

@@ -86,2 +86,17 @@ 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; };
 
+	var replaceExtToWebp = function replaceExtToWebp(value, condition) {
+		return condition ? value.replace(/\.(jpe?g|png)/gi, ".webp") : value;
+	};
+
+	var detectWebp = function 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;
+	};
+
 	var runningOnBrowser = typeof window !== "undefined";
@@ -95,24 +110,9 @@
 
-	var detectWebP = function detectWebP() {
-		if (!runningOnBrowser) {
-			return false;
-		}
+	var 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;
-	};
-
-	var supportsWebP = detectWebP();
-
-	var setSourcesInChildren = function setSourcesInChildren(parentTag, attrName, dataAttrName, toWebP) {
+	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);
 			}
@@ -122,49 +122,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));
 	};
 
-	var setSources = 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) {
@@ -186,2 +202,4 @@ if (supportsClassList) {
 
+	var managedTags = ["IMG", "IFRAME", "VIDEO"];
+
 	var callCallback = function callCallback(callback, argument) {
@@ -226,3 +244,3 @@ if (callback) {
 		callCallback(settings.callback_enter, element);
-		if (["IMG", "IFRAME", "VIDEO"].indexOf(element.tagName) > -1) {
+		if (managedTags.indexOf(element.tagName) > -1) {
 			addOneShotListeners(element, settings);
@@ -229,0 +247,0 @@ addClass(element, settings.class_loading);

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 r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},LazyLoad=function(){"use strict";function e(e){return e.filter(function(e){return!i(e)})}function t(e,t,n){!n&&i(e)||(p(t.callback_enter,e),["IMG","IFRAME","VIDEO"].indexOf(e.tagName)>-1&&(E(e,t),g(e,t.class_loading)),b(e,t),a(e),p(t.callback_set,e))}var n=function(e){var t={elements_selector:"img",container:document,threshold:300,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",class_loading:"loading",class_loaded:"loaded",class_error:"error",callback_load:null,callback_error:null,callback_set:null,callback_enter:null,to_webp:!1};return _extends({},t,e)},r=function(e,t){return e.getAttribute("data-"+t)},s=function(e,t,n){return e.setAttribute("data-"+t,n)},a=function(e){return s(e,"was-processed","true")},i=function(e){return"true"===r(e,"was-processed")},o=function(e,t){var n,r=new e(t);try{n=new CustomEvent("LazyLoad::Initialized",{detail:{instance:r}})}catch(e){(n=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:r})}window.dispatchEvent(n)},c="undefined"!=typeof window,l=c&&!("onscroll"in window)||/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),u=c&&"IntersectionObserver"in window,d=c&&"classList"in document.createElement("p"),f=function(){if(!c)return!1;var e=document.createElement("canvas");return!(!e.getContext||!e.getContext("2d"))&&0===e.toDataURL("image/webp").indexOf("data:image/webp")}(),v=function(e,t,n,s){for(var a,i=0;a=e.children[i];i+=1)if("SOURCE"===a.tagName){var o=r(a,n);h(a,t,o,s)}},_=function(e,t){return t?e.replace(/\.(jpe?g|png)/gi,".webp"):e},h=function(e,t,n,r){n&&e.setAttribute(t,_(n,r))},b=function(e,t){var n=t.data_sizes,s=t.data_srcset,a=t.data_src,i=r(e,a),o=f&&t.to_webp;switch(e.tagName){case"IMG":var c=e.parentNode;c&&"PICTURE"===c.tagName&&v(c,"srcset",s,o);var l=r(e,n);h(e,"sizes",l);var u=r(e,s);h(e,"srcset",u,o),h(e,"src",i,o);break;case"IFRAME":h(e,"src",i);break;case"VIDEO":v(e,"src",a),h(e,"src",i);break;default:if(i){var d=_(i,o);e.style.backgroundImage='url("'+d+'")'}}},g=function(e,t){d?e.classList.add(t):e.className+=(e.className?" ":"")+t},m=function(e,t){d?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},p=function(e,t){e&&e(t)},w=function(e,t,n){e.removeEventListener("load",t),e.removeEventListener("error",n)},E=function(e,t){var n=function n(s){L(s,!0,t),w(e,n,r)},r=function r(s){L(s,!1,t),w(e,n,r)};e.addEventListener("load",n),e.addEventListener("error",r)},L=function(e,t,n){var r=e.target;m(r,n.class_loading),g(r,t?n.class_loaded:n.class_error),p(t?n.callback_load:n.callback_error,r)},y=function(e){return e.isIntersecting||e.intersectionRatio>0},I=function(e){return{root:e.container===document?null:e.container,rootMargin:e.threshold+"px"}},O=function(e,t){this._settings=n(e),this._setObserver(),this.update(t)};return O.prototype={_setObserver:function(){var t=this;if(u){this._observer=new IntersectionObserver(function(n){n.forEach(function(e){if(y(e)){var n=e.target;t.load(n),t._observer.unobserve(n)}}),t._elements=e(t._elements)},I(this._settings))}},loadAll:function(){var t=this;this._elements.forEach(function(e){t.load(e)}),this._elements=e(this._elements)},update:function(t){var n=this,r=this._settings,s=t||r.container.querySelectorAll(r.elements_selector);this._elements=e(Array.prototype.slice.call(s)),!l&&this._observer?this._elements.forEach(function(e){n._observer.observe(e)}):this.loadAll()},destroy:function(){var t=this;this._observer&&(e(this._elements).forEach(function(e){t._observer.unobserve(e)}),this._observer=null),this._elements=null,this._settings=null},load:function(e,n){t(e,this._settings,n)}},c&&function(e,t){if(t)if(t.length)for(var n,r=0;n=t[r];r+=1)o(e,n);else o(e,t)}(O,window.lazyLoadOptions),O}();
+var _extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},LazyLoad=function(){"use strict";function e(e){return e.filter(function(e){return!o(e)})}function t(e,t,n){!n&&o(e)||(L(t.callback_enter,e),E.indexOf(e.tagName)>-1&&(I(e,t),p(e,t.class_loading)),b(e,t),a(e),L(t.callback_set,e))}var n=function(e){var t={elements_selector:"img",container:document,threshold:300,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",class_loading:"loading",class_loaded:"loaded",class_error:"error",callback_load:null,callback_error:null,callback_set:null,callback_enter:null,to_webp:!1};return _extends({},t,e)},r=function(e,t){return e.getAttribute("data-"+t)},s=function(e,t,n){return e.setAttribute("data-"+t,n)},a=function(e){return s(e,"was-processed","true")},o=function(e){return"true"===r(e,"was-processed")},i=function(e,t){var n,r=new e(t);try{n=new CustomEvent("LazyLoad::Initialized",{detail:{instance:r}})}catch(e){(n=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:r})}window.dispatchEvent(n)},c=function(e,t){return t?e.replace(/\.(jpe?g|png)/gi,".webp"):e},l="undefined"!=typeof window,u=l&&!("onscroll"in window)||/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),d=l&&"IntersectionObserver"in window,f=l&&"classList"in document.createElement("p"),v=l&&function(){var e=document.createElement("canvas");return!(!e.getContext||!e.getContext("2d"))&&0===e.toDataURL("image/webp").indexOf("data:image/webp")}(),_=function(e,t,n,s){for(var a,o=0;a=e.children[o];o+=1)if("SOURCE"===a.tagName){var i=r(a,n);h(a,t,i,s)}},h=function(e,t,n,r){n&&e.setAttribute(t,c(n,r))},g=function(e,t){var n=v&&t.to_webp,s=r(e,t.data_src);if(s){var a=c(s,n);e.style.backgroundImage='url("'+a+'")'}},m={IMG:function(e,t){var n=v&&t.to_webp,s=t.data_srcset,a=e.parentNode;a&&"PICTURE"===a.tagName&&_(a,"srcset",s,n);var o=r(e,t.data_sizes);h(e,"sizes",o);var i=r(e,s);h(e,"srcset",i,n);var c=r(e,t.data_src);h(e,"src",c,n)},IFRAME:function(e,t){var n=r(e,t.data_src);h(e,"src",n)},VIDEO:function(e,t){var n=t.data_src,s=r(e,n);_(e,"src",n),h(e,"src",s)}},b=function(e,t){var n=e.tagName,r=m[n];r?r(e,t):g(e,t)},p=function(e,t){f?e.classList.add(t):e.className+=(e.className?" ":"")+t},w=function(e,t){f?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},E=["IMG","IFRAME","VIDEO"],L=function(e,t){e&&e(t)},y=function(e,t,n){e.removeEventListener("load",t),e.removeEventListener("error",n)},I=function(e,t){var n=function n(s){O(s,!0,t),y(e,n,r)},r=function r(s){O(s,!1,t),y(e,n,r)};e.addEventListener("load",n),e.addEventListener("error",r)},O=function(e,t,n){var r=e.target;w(r,n.class_loading),p(r,t?n.class_loaded:n.class_error),L(t?n.callback_load:n.callback_error,r)},z=function(e){return e.isIntersecting||e.intersectionRatio>0},A=function(e){return{root:e.container===document?null:e.container,rootMargin:e.threshold+"px"}},k=function(e,t){this._settings=n(e),this._setObserver(),this.update(t)};return k.prototype={_setObserver:function(){var t=this;if(d){this._observer=new IntersectionObserver(function(n){n.forEach(function(e){if(z(e)){var n=e.target;t.load(n),t._observer.unobserve(n)}}),t._elements=e(t._elements)},A(this._settings))}},loadAll:function(){var t=this;this._elements.forEach(function(e){t.load(e)}),this._elements=e(this._elements)},update:function(t){var n=this,r=this._settings,s=t||r.container.querySelectorAll(r.elements_selector);this._elements=e(Array.prototype.slice.call(s)),!u&&this._observer?this._elements.forEach(function(e){n._observer.observe(e)}):this.loadAll()},destroy:function(){var t=this;this._observer&&(e(this._elements).forEach(function(e){t._observer.unobserve(e)}),this._observer=null),this._elements=null,this._settings=null},load:function(e,n){t(e,this._settings,n)}},l&&function(e,t){if(t)if(t.length)for(var n,r=0;n=t[r];r+=1)i(e,n);else i(e,t)}(k,window.lazyLoadOptions),k}();
 //# sourceMappingURL=lazyload.iife.min.js.map

dist/lazyload.js

@@ -90,2 +90,17 @@ 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; };
 
+	var replaceExtToWebp = function replaceExtToWebp(value, condition) {
+		return condition ? value.replace(/\.(jpe?g|png)/gi, ".webp") : value;
+	};
+
+	var detectWebp = function 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;
+	};
+
 	var runningOnBrowser = typeof window !== "undefined";
@@ -99,24 +114,9 @@
 
-	var detectWebP = function detectWebP() {
-		if (!runningOnBrowser) {
-			return false;
-		}
+	var 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;
-	};
-
-	var supportsWebP = detectWebP();
-
-	var setSourcesInChildren = function setSourcesInChildren(parentTag, attrName, dataAttrName, toWebP) {
+	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);
 			}
@@ -126,49 +126,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));
 	};
 
-	var setSources = 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) {
@@ -190,2 +206,4 @@ if (supportsClassList) {
 
+	var managedTags = ["IMG", "IFRAME", "VIDEO"];
+
 	var callCallback = function callCallback(callback, argument) {
@@ -230,3 +248,3 @@ if (callback) {
 		callCallback(settings.callback_enter, element);
-		if (["IMG", "IFRAME", "VIDEO"].indexOf(element.tagName) > -1) {
+		if (managedTags.indexOf(element.tagName) > -1) {
 			addOneShotListeners(element, settings);
@@ -233,0 +251,0 @@ addClass(element, settings.class_loading);

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 r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}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){return e.filter(function(e){return!a(e)})}function t(e,t,n){!n&&a(e)||(g(t.callback_enter,e),["IMG","IFRAME","VIDEO"].indexOf(e.tagName)>-1&&(w(e,t),p(e,t.class_loading)),b(e,t),o(e),g(t.callback_set,e))}var n=function(e){var t={elements_selector:"img",container:document,threshold:300,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",class_loading:"loading",class_loaded:"loaded",class_error:"error",callback_load:null,callback_error:null,callback_set:null,callback_enter:null,to_webp:!1};return _extends({},t,e)},r=function(e,t){return e.getAttribute("data-"+t)},s=function(e,t,n){return e.setAttribute("data-"+t,n)},o=function(e){return s(e,"was-processed","true")},a=function(e){return"true"===r(e,"was-processed")},i=function(e,t){var n,r=new e(t);try{n=new CustomEvent("LazyLoad::Initialized",{detail:{instance:r}})}catch(e){(n=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:r})}window.dispatchEvent(n)},c="undefined"!=typeof window,l=c&&!("onscroll"in window)||/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),u=c&&"IntersectionObserver"in window,d=c&&"classList"in document.createElement("p"),f=function(){if(!c)return!1;var e=document.createElement("canvas");return!(!e.getContext||!e.getContext("2d"))&&0===e.toDataURL("image/webp").indexOf("data:image/webp")}(),_=function(e,t,n,s){for(var o,a=0;o=e.children[a];a+=1)if("SOURCE"===o.tagName){var i=r(o,n);m(o,t,i,s)}},v=function(e,t){return t?e.replace(/\.(jpe?g|png)/gi,".webp"):e},m=function(e,t,n,r){n&&e.setAttribute(t,v(n,r))},b=function(e,t){var n=t.data_sizes,s=t.data_srcset,o=t.data_src,a=r(e,o),i=f&&t.to_webp;switch(e.tagName){case"IMG":var c=e.parentNode;c&&"PICTURE"===c.tagName&&_(c,"srcset",s,i);var l=r(e,n);m(e,"sizes",l);var u=r(e,s);m(e,"srcset",u,i),m(e,"src",a,i);break;case"IFRAME":m(e,"src",a);break;case"VIDEO":_(e,"src",o),m(e,"src",a);break;default:if(a){var d=v(a,i);e.style.backgroundImage='url("'+d+'")'}}},p=function(e,t){d?e.classList.add(t):e.className+=(e.className?" ":"")+t},h=function(e,t){d?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},g=function(e,t){e&&e(t)},y=function(e,t,n){e.removeEventListener("load",t),e.removeEventListener("error",n)},w=function(e,t){var n=function n(s){E(s,!0,t),y(e,n,r)},r=function r(s){E(s,!1,t),y(e,n,r)};e.addEventListener("load",n),e.addEventListener("error",r)},E=function(e,t,n){var r=e.target;h(r,n.class_loading),p(r,t?n.class_loaded:n.class_error),g(t?n.callback_load:n.callback_error,r)},L=function(e){return e.isIntersecting||e.intersectionRatio>0},I=function(e){return{root:e.container===document?null:e.container,rootMargin:e.threshold+"px"}},O=function(e,t){this._settings=n(e),this._setObserver(),this.update(t)};return O.prototype={_setObserver:function(){var t=this;if(u){this._observer=new IntersectionObserver(function(n){n.forEach(function(e){if(L(e)){var n=e.target;t.load(n),t._observer.unobserve(n)}}),t._elements=e(t._elements)},I(this._settings))}},loadAll:function(){var t=this;this._elements.forEach(function(e){t.load(e)}),this._elements=e(this._elements)},update:function(t){var n=this,r=this._settings,s=t||r.container.querySelectorAll(r.elements_selector);this._elements=e(Array.prototype.slice.call(s)),!l&&this._observer?this._elements.forEach(function(e){n._observer.observe(e)}):this.loadAll()},destroy:function(){var t=this;this._observer&&(e(this._elements).forEach(function(e){t._observer.unobserve(e)}),this._observer=null),this._elements=null,this._settings=null},load:function(e,n){t(e,this._settings,n)}},c&&function(e,t){if(t)if(t.length)for(var n,r=0;n=t[r];r+=1)i(e,n);else i(e,t)}(O,window.lazyLoadOptions),O});
+var _extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}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){return e.filter(function(e){return!a(e)})}function t(e,t,n){!n&&a(e)||(E(t.callback_enter,e),w.indexOf(e.tagName)>-1&&(I(e,t),g(e,t.class_loading)),h(e,t),s(e),E(t.callback_set,e))}var n=function(e){var t={elements_selector:"img",container:document,threshold:300,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",class_loading:"loading",class_loaded:"loaded",class_error:"error",callback_load:null,callback_error:null,callback_set:null,callback_enter:null,to_webp:!1};return _extends({},t,e)},r=function(e,t){return e.getAttribute("data-"+t)},o=function(e,t,n){return e.setAttribute("data-"+t,n)},s=function(e){return o(e,"was-processed","true")},a=function(e){return"true"===r(e,"was-processed")},i=function(e,t){var n,r=new e(t);try{n=new CustomEvent("LazyLoad::Initialized",{detail:{instance:r}})}catch(e){(n=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:r})}window.dispatchEvent(n)},c=function(e,t){return t?e.replace(/\.(jpe?g|png)/gi,".webp"):e},l="undefined"!=typeof window,u=l&&!("onscroll"in window)||/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),d=l&&"IntersectionObserver"in window,f=l&&"classList"in document.createElement("p"),_=l&&function(){var e=document.createElement("canvas");return!(!e.getContext||!e.getContext("2d"))&&0===e.toDataURL("image/webp").indexOf("data:image/webp")}(),v=function(e,t,n,o){for(var s,a=0;s=e.children[a];a+=1)if("SOURCE"===s.tagName){var i=r(s,n);m(s,t,i,o)}},m=function(e,t,n,r){n&&e.setAttribute(t,c(n,r))},p=function(e,t){var n=_&&t.to_webp,o=r(e,t.data_src);if(o){var s=c(o,n);e.style.backgroundImage='url("'+s+'")'}},b={IMG:function(e,t){var n=_&&t.to_webp,o=t.data_srcset,s=e.parentNode;s&&"PICTURE"===s.tagName&&v(s,"srcset",o,n);var a=r(e,t.data_sizes);m(e,"sizes",a);var i=r(e,o);m(e,"srcset",i,n);var c=r(e,t.data_src);m(e,"src",c,n)},IFRAME:function(e,t){var n=r(e,t.data_src);m(e,"src",n)},VIDEO:function(e,t){var n=t.data_src,o=r(e,n);v(e,"src",n),m(e,"src",o)}},h=function(e,t){var n=e.tagName,r=b[n];r?r(e,t):p(e,t)},g=function(e,t){f?e.classList.add(t):e.className+=(e.className?" ":"")+t},y=function(e,t){f?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},w=["IMG","IFRAME","VIDEO"],E=function(e,t){e&&e(t)},L=function(e,t,n){e.removeEventListener("load",t),e.removeEventListener("error",n)},I=function(e,t){var n=function n(o){O(o,!0,t),L(e,n,r)},r=function r(o){O(o,!1,t),L(e,n,r)};e.addEventListener("load",n),e.addEventListener("error",r)},O=function(e,t,n){var r=e.target;y(r,n.class_loading),g(r,t?n.class_loaded:n.class_error),E(t?n.callback_load:n.callback_error,r)},x=function(e){return e.isIntersecting||e.intersectionRatio>0},z=function(e){return{root:e.container===document?null:e.container,rootMargin:e.threshold+"px"}},A=function(e,t){this._settings=n(e),this._setObserver(),this.update(t)};return A.prototype={_setObserver:function(){var t=this;if(d){this._observer=new IntersectionObserver(function(n){n.forEach(function(e){if(x(e)){var n=e.target;t.load(n),t._observer.unobserve(n)}}),t._elements=e(t._elements)},z(this._settings))}},loadAll:function(){var t=this;this._elements.forEach(function(e){t.load(e)}),this._elements=e(this._elements)},update:function(t){var n=this,r=this._settings,o=t||r.container.querySelectorAll(r.elements_selector);this._elements=e(Array.prototype.slice.call(o)),!u&&this._observer?this._elements.forEach(function(e){n._observer.observe(e)}):this.loadAll()},destroy:function(){var t=this;this._observer&&(e(this._elements).forEach(function(e){t._observer.unobserve(e)}),this._observer=null),this._elements=null,this._settings=null},load:function(e,n){t(e,this._settings,n)}},l&&function(e,t){if(t)if(t.length)for(var n,r=0;n=t[r];r+=1)i(e,n);else i(e,t)}(A,window.lazyLoadOptions),A});
 //# sourceMappingURL=lazyload.min.js.map

package.json

 {
 	"name": "vanilla-lazyload",
-	"version": "10.14.0",
+	"version": "10.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.13.0/lazyload.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/8.14.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.13.0" : "10.14.0";
+	var v = !("IntersectionObserver" in w) ? "8.14.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.13.0`
+  Recommended version `npm install vanilla-lazyload@8.14.0`
   Latest version `npm install vanilla-lazyload`
 - **install it with bower**
-  Recommended version `bower install vanilla-lazyload#8.13.0`
+  Recommended version `bower install vanilla-lazyload#8.14.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.environment.js

@@ -0,1 +1,3 @@
+import { detectWebp } from "./lazyload.webp";
+
 export const runningOnBrowser = typeof window !== "undefined";
@@ -13,17 +15,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.reveal.js

@@ -5,2 +5,4 @@ import { setSources } from "./lazyload.setSources";
 
+const managedTags = ["IMG", "IFRAME", "VIDEO"];
+
 const callCallback = function(callback, argument) {
@@ -48,3 +50,3 @@ if (callback) {
 	callCallback(settings.callback_enter, element);
-	if (["IMG", "IFRAME", "VIDEO"].indexOf(element.tagName) > -1) {
+	if (managedTags.indexOf(element.tagName) > -1) {
 		addOneShotListeners(element, settings);
@@ -51,0 +53,0 @@ addClass(element, settings.class_loading);

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 const setSources = function(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

1075523

increased by0.71%

Number of package files

148

increased by0.68%

Lines of code

1970

increased by1.08%

Number of lines in readme file

630

increased by2.94%

No dependency changes