vanilla-lazyload - npm Package Compare versions

Comparing version 10.13.0 to 10.14.0

.eslintrc.json

 {
-    "parserOptions": {
-        "ecmaVersion": 6,
-        "sourceType": "module"
-    },
-    "env": {
-        "browser": true,
-        "jest": true
-    },
-    "rules": {
-        "quotes": [2, "double"],
-        "block-scoped-var": 1,
-        "class-methods-use-this": 1,
-        "complexity": 1,
-        "consistent-return": 1,
-        "curly": 2,
-        "default-case": 1,
-        "dot-location": 1,
-        "dot-notation": 1,
-        "eqeqeq": 2,
-        "guard-for-in": 1,
-        "no-alert": 1,
-        "no-caller": 1,
-        "no-case-declarations": 1,
-        "no-div-regex": 1,
-        "no-else-return": 1,
-        "no-empty-function": 1,
-        "no-empty-pattern": 1,
-        "no-eq-null": 1,
-        "no-eval": 1,
-        "no-extend-native": 1,
-        "no-extra-bind": 1,
-        "no-extra-label": 1,
-        "no-fallthrough": 1,
-        "no-floating-decimal": 1,
-        "no-global-assign": 1,
-        "no-implicit-coercion": 0,
-        "no-implicit-globals": 1,
-        "no-implied-eval": 1,
-        "no-invalid-this": 1,
-        "no-iterator": 1,
-        "no-labels": 1,
-        "no-lone-blocks": 1,
-        "no-loop-func": 1,
-        "no-magic-numbers": [1, {"ignore": [-1, 0, 1]}],
-        "no-multi-spaces": 1,
-        "no-multi-str": 1,
-        "no-new": 1,
-        "no-new-func": 1,
-        "no-new-wrappers": 1,
-        "no-octal": 1,
-        "no-octal-escape": 1,
-        "no-param-reassign": 1,
-        "no-proto": 1,
-        "no-redeclare": 1,
-        "no-restricted-properties": 1,
-        "no-return-assign": 1,
-        "no-return-await": 1,
-        "no-script-url": 1,
-        "no-self-assign": 1,
-        "no-self-compare": 1,
-        "no-sequences": 1,
-        "no-throw-literal": 1,
-        "no-unmodified-loop-condition": 1,
-        "no-unused-expressions": 1,
-        "no-unused-labels": 1,
-        "no-useless-call": 1,
-        "no-useless-concat": 1,
-        "no-useless-escape": 1,
-        "no-useless-return": 1,
-        "no-void": 1,
-        "no-warning-comments": 1,
-        "no-with": 1,
-        "prefer-promise-reject-errors": 1,
-        "radix": 1,
-        "require-await": 1,
-        "vars-on-top": 1,
-        "wrap-iife": 1,
-        "yoda": 1
-    }
-}
+	"parserOptions": {
+		"ecmaVersion": 6,
+		"sourceType": "module"
+	},
+	"env": {
+		"browser": true,
+		"jest": true
+	},
+	"rules": {
+		"quotes": [2, "double"],
+		"block-scoped-var": 1,
+		"class-methods-use-this": 1,
+		"complexity": 1,
+		"consistent-return": 1,
+		"curly": 2,
+		"default-case": 1,
+		"dot-location": 1,
+		"dot-notation": 1,
+		"eqeqeq": 2,
+		"guard-for-in": 1,
+		"no-alert": 1,
+		"no-caller": 1,
+		"no-case-declarations": 1,
+		"no-div-regex": 1,
+		"no-else-return": 1,
+		"no-empty-function": 1,
+		"no-empty-pattern": 1,
+		"no-eq-null": 1,
+		"no-eval": 1,
+		"no-extend-native": 1,
+		"no-extra-bind": 1,
+		"no-extra-label": 1,
+		"no-fallthrough": 1,
+		"no-floating-decimal": 1,
+		"no-global-assign": 1,
+		"no-implicit-coercion": 0,
+		"no-implicit-globals": 1,
+		"no-implied-eval": 1,
+		"no-invalid-this": 1,
+		"no-iterator": 1,
+		"no-labels": 1,
+		"no-lone-blocks": 1,
+		"no-loop-func": 1,
+		"no-magic-numbers": [1, { "ignore": [-1, 0, 1] }],
+		"no-multi-spaces": 1,
+		"no-multi-str": 1,
+		"no-new": 1,
+		"no-new-func": 1,
+		"no-new-wrappers": 1,
+		"no-octal": 1,
+		"no-octal-escape": 1,
+		"no-param-reassign": 1,
+		"no-proto": 1,
+		"no-redeclare": 1,
+		"no-restricted-properties": 1,
+		"no-return-assign": 1,
+		"no-return-await": 1,
+		"no-script-url": 1,
+		"no-self-assign": 1,
+		"no-self-compare": 1,
+		"no-sequences": 1,
+		"no-throw-literal": 1,
+		"no-unmodified-loop-condition": 1,
+		"no-unused-expressions": 1,
+		"no-unused-labels": 1,
+		"no-useless-call": 1,
+		"no-useless-concat": 1,
+		"no-useless-escape": 1,
+		"no-useless-return": 1,
+		"no-void": 1,
+		"no-warning-comments": 1,
+		"no-with": 1,
+		"prefer-promise-reject-errors": 1,
+		"radix": 1,
+		"require-await": 1,
+		"vars-on-top": 0,
+		"wrap-iife": 1,
+		"yoda": 1
+	}
+}

CHANGELOG.md

@@ -5,2 +5,6 @@ # CHANGELOG
 
+#### 10.14.0
+
+Now supporting WebP through dynamic extension rename if the user browser is compatible.
+
 #### 10.13.0
@@ -16,4 +20,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            |
 
@@ -152,4 +155,3 @@ #### 10.12.0
 | `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            |
 
@@ -156,0 +158,0 @@ #### 8.12.0

dist/lazyload.amd.js

@@ -20,3 +20,4 @@ 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; };
 			callback_set: null,
-			callback_enter: null
+			callback_enter: null,
+			to_webp: false
 		};
@@ -86,9 +87,32 @@
 
-	var setSourcesInChildren = function setSourcesInChildren(parentTag, attrName, dataAttrName) {
+	var runningOnBrowser = typeof window !== "undefined";
+
+	var isBot = runningOnBrowser && !("onscroll" in window) || /(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent);
+
+	var supportsIntersectionObserver = runningOnBrowser && "IntersectionObserver" in window;
+
+	var supportsClassList = runningOnBrowser && "classList" in document.createElement("p");
+
+	var detectWebP = function 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;
+	};
+
+	var supportsWebP = detectWebP();
+
+	var setSourcesInChildren = function setSourcesInChildren(parentTag, attrName, dataAttrName, toWebP) {
 		for (var i = 0, childTag; childTag = parentTag.children[i]; i += 1) {
 			if (childTag.tagName === "SOURCE") {
-				var attributeValue = getData(childTag, dataAttrName);
-				if (attributeValue) {
-					childTag.setAttribute(attrName, attributeValue);
-				}
+				var attrValue = getData(childTag, dataAttrName);
+				setAttributeIfNotNullOrEmpty(childTag, attrName, attrValue, toWebP);
 			}
@@ -98,7 +122,11 @@ }
 
-	var setAttributeIfNotNullOrEmpty = function setAttributeIfNotNullOrEmpty(element, attrName, value) {
+	var replaceExtToWebp = function replaceExtToWebp(value, condition) {
+		return condition ? value.replace(/\.(jpe?g|png)/gi, ".webp") : value;
+	};
+
+	var setAttributeIfNotNullOrEmpty = function setAttributeIfNotNullOrEmpty(element, attrName, value, toWebP) {
 		if (!value) {
 			return;
 		}
-		element.setAttribute(attrName, value);
+		element.setAttribute(attrName, replaceExtToWebp(value, toWebP));
 	};
@@ -112,2 +140,3 @@
 		var srcDataValue = getData(element, srcDataName);
+		var mustChangeToWebP = supportsWebP && settings.to_webp;
 		switch (element.tagName) {
@@ -118,3 +147,3 @@ case "IMG":
 					if (parent && parent.tagName === "PICTURE") {
-						setSourcesInChildren(parent, "srcset", srcsetDataName);
+						setSourcesInChildren(parent, "srcset", srcsetDataName, mustChangeToWebP);
 					}
@@ -124,4 +153,4 @@ var sizesDataValue = getData(element, sizesDataName);
 					var srcsetDataValue = getData(element, srcsetDataName);
-					setAttributeIfNotNullOrEmpty(element, "srcset", srcsetDataValue);
-					setAttributeIfNotNullOrEmpty(element, "src", srcDataValue);
+					setAttributeIfNotNullOrEmpty(element, "srcset", srcsetDataValue, mustChangeToWebP);
+					setAttributeIfNotNullOrEmpty(element, "src", srcDataValue, mustChangeToWebP);
 					break;
@@ -138,3 +167,4 @@ }
 				if (srcDataValue) {
-					element.style.backgroundImage = "url(\"" + srcDataValue + "\")";
+					var setValue = replaceExtToWebp(srcDataValue, mustChangeToWebP);
+					element.style.backgroundImage = "url(\"" + setValue + "\")";
 				}
@@ -144,10 +174,2 @@ }
 
-	var runningOnBrowser = typeof window !== "undefined";
-
-	var isBot = runningOnBrowser && !("onscroll" in window) || /(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent);
-
-	var supportsIntersectionObserver = runningOnBrowser && "IntersectionObserver" in window;
-
-	var supportsClassList = runningOnBrowser && "classList" in document.createElement("p");
-
 	var addClass = function addClass(element, className) {
@@ -154,0 +176,0 @@ if (supportsClassList) {

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)||(m(t.callback_enter,e),["IMG","IFRAME","VIDEO"].indexOf(e.tagName)>-1&&(p(e,t),h(e,t.class_loading)),u(e,t),a(e),m(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};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,n){for(var s,a=0;s=e.children[a];a+=1)if("SOURCE"===s.tagName){var i=r(s,n);i&&s.setAttribute(t,i)}},l=function(e,t,n){n&&e.setAttribute(t,n)},u=function(e,t){var n=t.data_sizes,s=t.data_srcset,a=t.data_src,i=r(e,a);switch(e.tagName){case"IMG":var o=e.parentNode;o&&"PICTURE"===o.tagName&&c(o,"srcset",s);var u=r(e,n);l(e,"sizes",u);var d=r(e,s);l(e,"srcset",d),l(e,"src",i);break;case"IFRAME":l(e,"src",i);break;case"VIDEO":c(e,"src",a),l(e,"src",i);break;default:i&&(e.style.backgroundImage='url("'+i+'")')}},d="undefined"!=typeof window,f=d&&!("onscroll"in window)||/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),v=d&&"IntersectionObserver"in window,_=d&&"classList"in document.createElement("p"),h=function(e,t){_?e.classList.add(t):e.className+=(e.className?" ":"")+t},b=function(e,t){_?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},m=function(e,t){e&&e(t)},g=function(e,t,n){e.removeEventListener("load",t),e.removeEventListener("error",n)},p=function(e,t){var n=function n(s){E(s,!0,t),g(e,n,r)},r=function r(s){E(s,!1,t),g(e,n,r)};e.addEventListener("load",n),e.addEventListener("error",r)},E=function(e,t,n){var r=e.target;b(r,n.class_loading),h(r,t?n.class_loaded:n.class_error),m(t?n.callback_load:n.callback_error,r)},w=function(e){return e.isIntersecting||e.intersectionRatio>0},y=function(e){return{root:e.container===document?null:e.container,rootMargin:e.threshold+"px"}},I=function(e,t){this._settings=n(e),this._setObserver(),this.update(t)};return I.prototype={_setObserver:function(){var t=this;if(v){this._observer=new IntersectionObserver(function(n){n.forEach(function(e){if(w(e)){var n=e.target;t.load(n),t._observer.unobserve(n)}}),t._elements=e(t._elements)},y(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)),!f&&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)}},d&&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)}(I,window.lazyLoadOptions),I});
+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});
 //# sourceMappingURL=lazyload.amd.min.js.map

dist/lazyload.es2015.js

@@ -1,19 +0,20 @@
-var getInstanceSettings = (customSettings) => {
-    const defaultSettings = {
-        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
-    };
+var getInstanceSettings = customSettings => {
+	const defaultSettings = {
+		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: false
+	};
 
-    return Object.assign({}, defaultSettings, customSettings);
+	return Object.assign({}, defaultSettings, customSettings);
 };
@@ -76,13 +77,41 @@
 
+const runningOnBrowser = typeof window !== "undefined";
+
+const isBot =
+	(runningOnBrowser && !("onscroll" in window)) ||
+	/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent);
+
+const supportsIntersectionObserver =
+	runningOnBrowser && "IntersectionObserver" in window;
+
+const supportsClassList =
+	runningOnBrowser && "classList" in document.createElement("p");
+
+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;
+};
+
+const supportsWebP = detectWebP();
+
 const setSourcesInChildren = function(
 	parentTag,
 	attrName,
-	dataAttrName
+	dataAttrName,
+	toWebP
 ) {
 	for (let i = 0, childTag; (childTag = parentTag.children[i]); i += 1) {
 		if (childTag.tagName === "SOURCE") {
-			let attributeValue = getData(childTag, dataAttrName);
-			if (attributeValue) {
-				childTag.setAttribute(attrName, attributeValue);
-			}
+			let attrValue = getData(childTag, dataAttrName);
+			setAttributeIfNotNullOrEmpty(childTag, attrName, attrValue, toWebP);
 		}
@@ -92,7 +121,15 @@ }
 
-const setAttributeIfNotNullOrEmpty = function(element, attrName, value) {
+const replaceExtToWebp = (value, condition) =>
+	condition ? value.replace(/\.(jpe?g|png)/gi, ".webp") : value;
+
+const setAttributeIfNotNullOrEmpty = function(
+	element,
+	attrName,
+	value,
+	toWebP
+) {
 	if (!value) {
 		return;
 	}
-	element.setAttribute(attrName, value);
+	element.setAttribute(attrName, replaceExtToWebp(value, toWebP));
 };
@@ -107,2 +144,3 @@
 	const srcDataValue = getData(element, srcDataName);
+	const mustChangeToWebP = supportsWebP && settings.to_webp;
 	switch (element.tagName) {
@@ -112,3 +150,8 @@ case "IMG": {
 			if (parent && parent.tagName === "PICTURE") {
-				setSourcesInChildren(parent, "srcset", srcsetDataName);
+				setSourcesInChildren(
+					parent,
+					"srcset",
+					srcsetDataName,
+					mustChangeToWebP
+				);
 			}
@@ -118,4 +161,14 @@ const sizesDataValue = getData(element, sizesDataName);
 			const srcsetDataValue = getData(element, srcsetDataName);
-			setAttributeIfNotNullOrEmpty(element, "srcset", srcsetDataValue);
-			setAttributeIfNotNullOrEmpty(element, "src", srcDataValue);
+			setAttributeIfNotNullOrEmpty(
+				element,
+				"srcset",
+				srcsetDataValue,
+				mustChangeToWebP
+			);
+			setAttributeIfNotNullOrEmpty(
+				element,
+				"src",
+				srcDataValue,
+				mustChangeToWebP
+			);
 			break;
@@ -132,3 +185,4 @@ }
 			if (srcDataValue) {
-				element.style.backgroundImage = `url("${srcDataValue}")`;
+				let setValue = replaceExtToWebp(srcDataValue, mustChangeToWebP);
+				element.style.backgroundImage = `url("${setValue}")`;
 			}
@@ -138,14 +192,2 @@ }
 
-const runningOnBrowser = typeof window !== "undefined";
-
-const isBot =
-	(runningOnBrowser && !("onscroll" in window)) ||
-	/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent);
-
-const supportsIntersectionObserver =
-	runningOnBrowser && "IntersectionObserver" in window;
-
-const supportsClassList =
-	runningOnBrowser && "classList" in document.createElement("p");
-
 const addClass = (element, className) => {
@@ -152,0 +194,0 @@ if (supportsClassList) {

dist/lazyload.iife.js

@@ -20,3 +20,4 @@ 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; };
 			callback_set: null,
-			callback_enter: null
+			callback_enter: null,
+			to_webp: false
 		};
@@ -86,9 +87,32 @@
 
-	var setSourcesInChildren = function setSourcesInChildren(parentTag, attrName, dataAttrName) {
+	var runningOnBrowser = typeof window !== "undefined";
+
+	var isBot = runningOnBrowser && !("onscroll" in window) || /(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent);
+
+	var supportsIntersectionObserver = runningOnBrowser && "IntersectionObserver" in window;
+
+	var supportsClassList = runningOnBrowser && "classList" in document.createElement("p");
+
+	var detectWebP = function 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;
+	};
+
+	var supportsWebP = detectWebP();
+
+	var setSourcesInChildren = function setSourcesInChildren(parentTag, attrName, dataAttrName, toWebP) {
 		for (var i = 0, childTag; childTag = parentTag.children[i]; i += 1) {
 			if (childTag.tagName === "SOURCE") {
-				var attributeValue = getData(childTag, dataAttrName);
-				if (attributeValue) {
-					childTag.setAttribute(attrName, attributeValue);
-				}
+				var attrValue = getData(childTag, dataAttrName);
+				setAttributeIfNotNullOrEmpty(childTag, attrName, attrValue, toWebP);
 			}
@@ -98,7 +122,11 @@ }
 
-	var setAttributeIfNotNullOrEmpty = function setAttributeIfNotNullOrEmpty(element, attrName, value) {
+	var replaceExtToWebp = function replaceExtToWebp(value, condition) {
+		return condition ? value.replace(/\.(jpe?g|png)/gi, ".webp") : value;
+	};
+
+	var setAttributeIfNotNullOrEmpty = function setAttributeIfNotNullOrEmpty(element, attrName, value, toWebP) {
 		if (!value) {
 			return;
 		}
-		element.setAttribute(attrName, value);
+		element.setAttribute(attrName, replaceExtToWebp(value, toWebP));
 	};
@@ -112,2 +140,3 @@
 		var srcDataValue = getData(element, srcDataName);
+		var mustChangeToWebP = supportsWebP && settings.to_webp;
 		switch (element.tagName) {
@@ -118,3 +147,3 @@ case "IMG":
 					if (parent && parent.tagName === "PICTURE") {
-						setSourcesInChildren(parent, "srcset", srcsetDataName);
+						setSourcesInChildren(parent, "srcset", srcsetDataName, mustChangeToWebP);
 					}
@@ -124,4 +153,4 @@ var sizesDataValue = getData(element, sizesDataName);
 					var srcsetDataValue = getData(element, srcsetDataName);
-					setAttributeIfNotNullOrEmpty(element, "srcset", srcsetDataValue);
-					setAttributeIfNotNullOrEmpty(element, "src", srcDataValue);
+					setAttributeIfNotNullOrEmpty(element, "srcset", srcsetDataValue, mustChangeToWebP);
+					setAttributeIfNotNullOrEmpty(element, "src", srcDataValue, mustChangeToWebP);
 					break;
@@ -138,3 +167,4 @@ }
 				if (srcDataValue) {
-					element.style.backgroundImage = "url(\"" + srcDataValue + "\")";
+					var setValue = replaceExtToWebp(srcDataValue, mustChangeToWebP);
+					element.style.backgroundImage = "url(\"" + setValue + "\")";
 				}
@@ -144,10 +174,2 @@ }
 
-	var runningOnBrowser = typeof window !== "undefined";
-
-	var isBot = runningOnBrowser && !("onscroll" in window) || /(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent);
-
-	var supportsIntersectionObserver = runningOnBrowser && "IntersectionObserver" in window;
-
-	var supportsClassList = runningOnBrowser && "classList" in document.createElement("p");
-
 	var addClass = function addClass(element, className) {
@@ -154,0 +176,0 @@ if (supportsClassList) {

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)||(m(t.callback_enter,e),["IMG","IFRAME","VIDEO"].indexOf(e.tagName)>-1&&(p(e,t),h(e,t.class_loading)),u(e,t),a(e),m(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};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,n){for(var s,a=0;s=e.children[a];a+=1)if("SOURCE"===s.tagName){var i=r(s,n);i&&s.setAttribute(t,i)}},l=function(e,t,n){n&&e.setAttribute(t,n)},u=function(e,t){var n=t.data_sizes,s=t.data_srcset,a=t.data_src,i=r(e,a);switch(e.tagName){case"IMG":var o=e.parentNode;o&&"PICTURE"===o.tagName&&c(o,"srcset",s);var u=r(e,n);l(e,"sizes",u);var d=r(e,s);l(e,"srcset",d),l(e,"src",i);break;case"IFRAME":l(e,"src",i);break;case"VIDEO":c(e,"src",a),l(e,"src",i);break;default:i&&(e.style.backgroundImage='url("'+i+'")')}},d="undefined"!=typeof window,f=d&&!("onscroll"in window)||/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),v=d&&"IntersectionObserver"in window,_=d&&"classList"in document.createElement("p"),h=function(e,t){_?e.classList.add(t):e.className+=(e.className?" ":"")+t},b=function(e,t){_?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},m=function(e,t){e&&e(t)},g=function(e,t,n){e.removeEventListener("load",t),e.removeEventListener("error",n)},p=function(e,t){var n=function n(s){E(s,!0,t),g(e,n,r)},r=function r(s){E(s,!1,t),g(e,n,r)};e.addEventListener("load",n),e.addEventListener("error",r)},E=function(e,t,n){var r=e.target;b(r,n.class_loading),h(r,t?n.class_loaded:n.class_error),m(t?n.callback_load:n.callback_error,r)},w=function(e){return e.isIntersecting||e.intersectionRatio>0},y=function(e){return{root:e.container===document?null:e.container,rootMargin:e.threshold+"px"}},L=function(e,t){this._settings=n(e),this._setObserver(),this.update(t)};return L.prototype={_setObserver:function(){var t=this;if(v){this._observer=new IntersectionObserver(function(n){n.forEach(function(e){if(w(e)){var n=e.target;t.load(n),t._observer.unobserve(n)}}),t._elements=e(t._elements)},y(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)),!f&&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)}},d&&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)}(L,window.lazyLoadOptions),L}();
+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}();
 //# sourceMappingURL=lazyload.iife.min.js.map

dist/lazyload.js

@@ -24,3 +24,4 @@ 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; };
 			callback_set: null,
-			callback_enter: null
+			callback_enter: null,
+			to_webp: false
 		};
@@ -90,9 +91,32 @@
 
-	var setSourcesInChildren = function setSourcesInChildren(parentTag, attrName, dataAttrName) {
+	var runningOnBrowser = typeof window !== "undefined";
+
+	var isBot = runningOnBrowser && !("onscroll" in window) || /(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent);
+
+	var supportsIntersectionObserver = runningOnBrowser && "IntersectionObserver" in window;
+
+	var supportsClassList = runningOnBrowser && "classList" in document.createElement("p");
+
+	var detectWebP = function 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;
+	};
+
+	var supportsWebP = detectWebP();
+
+	var setSourcesInChildren = function setSourcesInChildren(parentTag, attrName, dataAttrName, toWebP) {
 		for (var i = 0, childTag; childTag = parentTag.children[i]; i += 1) {
 			if (childTag.tagName === "SOURCE") {
-				var attributeValue = getData(childTag, dataAttrName);
-				if (attributeValue) {
-					childTag.setAttribute(attrName, attributeValue);
-				}
+				var attrValue = getData(childTag, dataAttrName);
+				setAttributeIfNotNullOrEmpty(childTag, attrName, attrValue, toWebP);
 			}
@@ -102,7 +126,11 @@ }
 
-	var setAttributeIfNotNullOrEmpty = function setAttributeIfNotNullOrEmpty(element, attrName, value) {
+	var replaceExtToWebp = function replaceExtToWebp(value, condition) {
+		return condition ? value.replace(/\.(jpe?g|png)/gi, ".webp") : value;
+	};
+
+	var setAttributeIfNotNullOrEmpty = function setAttributeIfNotNullOrEmpty(element, attrName, value, toWebP) {
 		if (!value) {
 			return;
 		}
-		element.setAttribute(attrName, value);
+		element.setAttribute(attrName, replaceExtToWebp(value, toWebP));
 	};
@@ -116,2 +144,3 @@
 		var srcDataValue = getData(element, srcDataName);
+		var mustChangeToWebP = supportsWebP && settings.to_webp;
 		switch (element.tagName) {
@@ -122,3 +151,3 @@ case "IMG":
 					if (parent && parent.tagName === "PICTURE") {
-						setSourcesInChildren(parent, "srcset", srcsetDataName);
+						setSourcesInChildren(parent, "srcset", srcsetDataName, mustChangeToWebP);
 					}
@@ -128,4 +157,4 @@ var sizesDataValue = getData(element, sizesDataName);
 					var srcsetDataValue = getData(element, srcsetDataName);
-					setAttributeIfNotNullOrEmpty(element, "srcset", srcsetDataValue);
-					setAttributeIfNotNullOrEmpty(element, "src", srcDataValue);
+					setAttributeIfNotNullOrEmpty(element, "srcset", srcsetDataValue, mustChangeToWebP);
+					setAttributeIfNotNullOrEmpty(element, "src", srcDataValue, mustChangeToWebP);
 					break;
@@ -142,3 +171,4 @@ }
 				if (srcDataValue) {
-					element.style.backgroundImage = 'url("' + srcDataValue + '")';
+					var setValue = replaceExtToWebp(srcDataValue, mustChangeToWebP);
+					element.style.backgroundImage = 'url("' + setValue + '")';
 				}
@@ -148,10 +178,2 @@ }
 
-	var runningOnBrowser = typeof window !== "undefined";
-
-	var isBot = runningOnBrowser && !("onscroll" in window) || /(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent);
-
-	var supportsIntersectionObserver = runningOnBrowser && "IntersectionObserver" in window;
-
-	var supportsClassList = runningOnBrowser && "classList" in document.createElement("p");
-
 	var addClass = function addClass(element, className) {
@@ -158,0 +180,0 @@ if (supportsClassList) {

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)||(h(t.callback_enter,e),["IMG","IFRAME","VIDEO"].indexOf(e.tagName)>-1&&(y(e,t),m(e,t.class_loading)),u(e,t),o(e),h(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};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=function(e,t,n){for(var s,o=0;s=e.children[o];o+=1)if("SOURCE"===s.tagName){var a=r(s,n);a&&s.setAttribute(t,a)}},l=function(e,t,n){n&&e.setAttribute(t,n)},u=function(e,t){var n=t.data_sizes,s=t.data_srcset,o=t.data_src,a=r(e,o);switch(e.tagName){case"IMG":var i=e.parentNode;i&&"PICTURE"===i.tagName&&c(i,"srcset",s);var u=r(e,n);l(e,"sizes",u);var d=r(e,s);l(e,"srcset",d),l(e,"src",a);break;case"IFRAME":l(e,"src",a);break;case"VIDEO":c(e,"src",o),l(e,"src",a);break;default:a&&(e.style.backgroundImage='url("'+a+'")')}},d="undefined"!=typeof window,f=d&&!("onscroll"in window)||/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),_=d&&"IntersectionObserver"in window,v=d&&"classList"in document.createElement("p"),m=function(e,t){v?e.classList.add(t):e.className+=(e.className?" ":"")+t},b=function(e,t){v?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},h=function(e,t){e&&e(t)},p=function(e,t,n){e.removeEventListener("load",t),e.removeEventListener("error",n)},y=function(e,t){var n=function n(s){g(s,!0,t),p(e,n,r)},r=function r(s){g(s,!1,t),p(e,n,r)};e.addEventListener("load",n),e.addEventListener("error",r)},g=function(e,t,n){var r=e.target;b(r,n.class_loading),m(r,t?n.class_loaded:n.class_error),h(t?n.callback_load:n.callback_error,r)},E=function(e){return e.isIntersecting||e.intersectionRatio>0},w=function(e){return{root:e.container===document?null:e.container,rootMargin:e.threshold+"px"}},L=function(e,t){this._settings=n(e),this._setObserver(),this.update(t)};return L.prototype={_setObserver:function(){var t=this;if(_){this._observer=new IntersectionObserver(function(n){n.forEach(function(e){if(E(e)){var n=e.target;t.load(n),t._observer.unobserve(n)}}),t._elements=e(t._elements)},w(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)),!f&&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)}},d&&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)}(L,window.lazyLoadOptions),L});
+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});
 //# sourceMappingURL=lazyload.min.js.map

package.json

 {
 	"name": "vanilla-lazyload",
-	"version": "10.13.0",
+	"version": "10.14.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",
@@ -5,0 +5,0 @@ "main": "dist/lazyload.min.js",

README.md

@@ -23,3 +23,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/10.13.0/lazyload.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/10.14.0/lazyload.min.js"></script>
 ```
@@ -36,3 +36,3 @@
 	var s = d.createElement("script"); s.async = true;
-	var v = !("IntersectionObserver" in w) ? "8.13.0" : "10.13.0";
+	var v = !("IntersectionObserver" in w) ? "8.13.0" : "10.14.0";
 	s.src = "https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/" + v + "/lazyload.min.js";
@@ -39,0 +39,0 @@ w.lazyLoadOptions = {}; // Your options here. See "recipes" for more information about async.

src/lazyload.defaults.js

@@ -1,19 +0,20 @@
-export default (customSettings) => {
-    const defaultSettings = {
-        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
-    };
+export default customSettings => {
+	const defaultSettings = {
+		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: false
+	};
 
-    return Object.assign({}, defaultSettings, customSettings);
-};
+	return Object.assign({}, defaultSettings, customSettings);
+};

src/lazyload.environment.js

@@ -12,1 +12,18 @@ export const runningOnBrowser = typeof window !== "undefined";
 	runningOnBrowser && "classList" in document.createElement("p");
+
+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();

src/lazyload.setSources.js

 import { getData } from "./lazyload.data";
+import { supportsWebP } from "./lazyload.environment";
 
@@ -6,10 +7,9 @@ export const setSourcesInChildren = function(
 	attrName,
-	dataAttrName
+	dataAttrName,
+	toWebP
 ) {
 	for (let i = 0, childTag; (childTag = parentTag.children[i]); i += 1) {
 		if (childTag.tagName === "SOURCE") {
-			let attributeValue = getData(childTag, dataAttrName);
-			if (attributeValue) {
-				childTag.setAttribute(attrName, attributeValue);
-			}
+			let attrValue = getData(childTag, dataAttrName);
+			setAttributeIfNotNullOrEmpty(childTag, attrName, attrValue, toWebP);
 		}
@@ -19,7 +19,15 @@ }
 
-export const setAttributeIfNotNullOrEmpty = function(element, attrName, value) {
+const replaceExtToWebp = (value, condition) =>
+	condition ? value.replace(/\.(jpe?g|png)/gi, ".webp") : value;
+
+export const setAttributeIfNotNullOrEmpty = function(
+	element,
+	attrName,
+	value,
+	toWebP
+) {
 	if (!value) {
 		return;
 	}
-	element.setAttribute(attrName, value);
+	element.setAttribute(attrName, replaceExtToWebp(value, toWebP));
 };
@@ -34,2 +42,3 @@
 	const srcDataValue = getData(element, srcDataName);
+	const mustChangeToWebP = supportsWebP && settings.to_webp;
 	switch (element.tagName) {
@@ -39,3 +48,8 @@ case "IMG": {
 			if (parent && parent.tagName === "PICTURE") {
-				setSourcesInChildren(parent, "srcset", srcsetDataName);
+				setSourcesInChildren(
+					parent,
+					"srcset",
+					srcsetDataName,
+					mustChangeToWebP
+				);
 			}
@@ -45,4 +59,14 @@ const sizesDataValue = getData(element, sizesDataName);
 			const srcsetDataValue = getData(element, srcsetDataName);
-			setAttributeIfNotNullOrEmpty(element, "srcset", srcsetDataValue);
-			setAttributeIfNotNullOrEmpty(element, "src", srcDataValue);
+			setAttributeIfNotNullOrEmpty(
+				element,
+				"srcset",
+				srcsetDataValue,
+				mustChangeToWebP
+			);
+			setAttributeIfNotNullOrEmpty(
+				element,
+				"src",
+				srcDataValue,
+				mustChangeToWebP
+			);
 			break;
@@ -59,5 +83,6 @@ }
 			if (srcDataValue) {
-				element.style.backgroundImage = `url("${srcDataValue}")`;
+				let setValue = replaceExtToWebp(srcDataValue, mustChangeToWebP);
+				element.style.backgroundImage = `url("${setValue}")`;
 			}
 	}
 };

No alert changes

Improved metrics

Total package byte prevSize

1067983

increased by3.04%

Number of package files

147

increased by1.38%

Lines of code

1949

increased by6.91%

No dependency changes