vanilla-lazyload - npm Package Compare versions

Comparing version 8.15.2 to 8.16.0

CHANGELOG.md

@@ -5,2 +5,14 @@ # CHANGELOG
 
+#### 10.18.0
+
+Added the ability to have multiple background images, through the new `data_bg` option.
+
+#### 10.17.0
+
+Added the ability to set different thresholds for the scrolling area, through the new `thresholds` option.
+
+#### 10.16.2
+
+**BUGFIX**: Class `loaded` was not applied to a loaded video (issue #239).
+
 #### 10.16.1
@@ -158,2 +170,6 @@
 
+#### 8.16.0
+
+Added the ability to have multiple background images, through the new `data_bg` option.
+
 #### 8.15.2
@@ -160,0 +176,0 @@

dist/lazyload.amd.js

@@ -15,2 +15,3 @@ 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; };
 			data_sizes: "sizes",
+			data_bg: "bg",
 			class_loading: "loading",
@@ -209,2 +210,3 @@ class_loaded: "loaded",
 		var srcDataValue = getData(element, settings.data_src);
+		var bgDataValue = getData(element, settings.data_bg);
 
@@ -215,2 +217,7 @@ if (srcDataValue) {
 		}
+
+		if (bgDataValue) {
+			var _setValue = replaceExtToWebp(bgDataValue, toWebpFlag);
+			element.style.backgroundImage = _setValue;
+		}
 	};
@@ -217,0 +224,0 @@

dist/lazyload.amd.min.js

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

dist/lazyload.es2015.js

@@ -9,2 +9,3 @@ var getDefaultSettings = () => ({
 	data_sizes: "sizes",
+	data_bg: "bg",
 	class_loading: "loading",
@@ -236,2 +237,3 @@ class_loaded: "loaded",
 	const srcDataValue = getData(element, settings.data_src);
+	const bgDataValue = getData(element, settings.data_bg);
 
@@ -242,2 +244,7 @@ if (srcDataValue) {
 	}
+
+	if (bgDataValue) {
+		let setValue = replaceExtToWebp(bgDataValue, toWebpFlag);
+		element.style.backgroundImage = setValue;
+	}
 };
@@ -244,0 +251,0 @@

dist/lazyload.iife.js

@@ -15,2 +15,3 @@ 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; };
 			data_sizes: "sizes",
+			data_bg: "bg",
 			class_loading: "loading",
@@ -209,2 +210,3 @@ class_loaded: "loaded",
 		var srcDataValue = getData(element, settings.data_src);
+		var bgDataValue = getData(element, settings.data_bg);
 
@@ -215,2 +217,7 @@ if (srcDataValue) {
 		}
+
+		if (bgDataValue) {
+			var _setValue = replaceExtToWebp(bgDataValue, toWebpFlag);
+			element.style.backgroundImage = _setValue;
+		}
 	};
@@ -217,0 +224,0 @@

dist/lazyload.iife.min.js

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

dist/lazyload.js

@@ -19,2 +19,3 @@ 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; };
 			data_sizes: "sizes",
+			data_bg: "bg",
 			class_loading: "loading",
@@ -213,2 +214,3 @@ class_loaded: "loaded",
 		var srcDataValue = getData(element, settings.data_src);
+		var bgDataValue = getData(element, settings.data_bg);
 
@@ -219,2 +221,7 @@ if (srcDataValue) {
 		}
+
+		if (bgDataValue) {
+			var _setValue = replaceExtToWebp(bgDataValue, toWebpFlag);
+			element.style.backgroundImage = _setValue;
+		}
 	};
@@ -221,0 +228,0 @@

dist/lazyload.min.js

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

package.json

 {
 	"name": "vanilla-lazyload",
-	"version": "8.15.2",
+	"version": "8.16.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

@@ -1,2 +0,2 @@
-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).
+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).
 
@@ -22,3 +22,3 @@ ➡️ Jump to: [👨‍💻 Include the script](#-include-the-script) - [🥧 Recipes](#-recipes) - [📺 Demos](#-demos) - [😋 Tips & tricks](#-tips--tricks) - [🔌 API](#-api) - [😯 Notable features](#-notable-features)
 ```html
-<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/8.15.2/lazyload.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/8.16.0/lazyload.min.js"></script>
 ```
@@ -29,3 +29,3 @@
 ```html
-<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/10.16.1/lazyload.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/10.17.0/lazyload.min.js"></script>
 ```
@@ -50,3 +50,3 @@
     var s = d.createElement("script"); 
-    var v = !("IntersectionObserver" in w) ? "8.15.2" : "10.16.1";
+    var v = !("IntersectionObserver" in w) ? "8.16.0" : "10.17.0";
     s.async = true; // This includes the script as async. See the "recipes" section for more information about async loading of LazyLoad.
@@ -69,3 +69,3 @@ s.src = "https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/" + v + "/lazyload.min.js";
 ```js
-define("vanilla-lazyLoad", ["https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/8.15.2/lazyload.amd.min.js"], function (LazyLoad) {
+define("vanilla-lazyLoad", ["https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/8.16.0/lazyload.amd.min.js"], function (LazyLoad) {
     return LazyLoad;
@@ -78,3 +78,3 @@ });
 ```js
-var v = !("IntersectionObserver" in window) ? "8.15.2" : "10.16.1";
+var v = !("IntersectionObserver" in window) ? "8.16.0" : "10.17.0";
 define("vanilla-lazyLoad", ["https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/" + v + "/lazyload.amd.min.js"], function (LazyLoad) {
@@ -94,3 +94,3 @@ return LazyLoad;
 ```
-npm install vanilla-lazyload@8.15.2
+npm install vanilla-lazyload@8.16.0
 ```
@@ -101,3 +101,3 @@
 ```
-npm install vanilla-lazyload@10.16.1
+npm install vanilla-lazyload@10.17.0
 ```
@@ -206,3 +206,3 @@
 
-[DEMO](http://verlok.github.io/lazyload/demos/single_container.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/single_container.html) - [API](#-api)
+[DEMO](http://verlok.github.io/lazyload/demos/container_single.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/container_single.html) - [API](#-api)
 
@@ -250,3 +250,3 @@ ### Multiple scrolling panels
 
-[DEMO](http://verlok.github.io/lazyload/demos/multiple_container.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/multiple_container.html) - [API](#-api)
+[DEMO](http://verlok.github.io/lazyload/demos/container_multiple.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/container_multiple.html) - [API](#-api)
 
@@ -530,3 +530,3 @@ ### Responsive images - img tag with srcset / sizes
 ```html
-<div class="lazy" data-src="../img/44721746JJ_15_a.jpg"></div>
+<div class="lazy" data-bg="url(../img/44721746JJ_15_a.jpg)"></div>
 ```
@@ -542,4 +542,9 @@
 
-That's it. Whenever the element selected by `elements_selector` is not an `img` or an `iframe`, LazyLoad puts the image found in the `data-src` attribute in the `background-image` of the element.
+That's it. LazyLoad copies the value of the `data-bg` attribute in the `background-image` inline style of the element, given that the element is not an `img`, `iframe` or `video`. 
 
+Please note that:
+- you need to use `url()` in the value of your `data-bg` attribute
+- you can specify multiple images as background, i.e. using `url(file1.jpg), url(file2.jpg)`
+- using `data-src` for background images is deprecated, and works only for single background images when `data-bg` is left blank
+
 [DEMO](http://verlok.github.io/lazyload/demos/background_images.html) - [SOURCE](https://github.com/verlok/lazyload/blob/master/demos/background_images.html) - [API](#-api)
@@ -728,19 +733,21 @@
 
-| Name                | Meaning                                                                                                                                                                                                                                                                                                                                                               | Default value |
-| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
-| `container`         | The scrolling container, and the container of the elements in the `elements_selector` option.                                                                                                                                                                                                                                                                         | `document`    |
-| `elements_selector` | The string selector of the elements to load lazily, to be selected as descendants of the `container` object. For multiple elements, you can add the css selectors for the same followed by a comma. E.g.: `'iframe, img, .container_class'`. This will lazy load images for iframe and img elements along with the images/background images under `'container_class'` | `"img"`       |
-| `threshold`         | The distance out of the viewport, expressed in pixel, before which to start loading the images                                                                                                                                                                                                                                                                        | `300`         |
-| `data_src`          | The name of the data attribute containing the original image source, excluding the `"data-"` part. E.g. if your data attribute is named `"data-src"`, just pass `"src"`                                                                                                                                                                                               | `"src"`       |
-| `data_srcset`       | The name of the data attribute containing the original image source set in either `img` and `source` tags, excluding the `"data-"` part. E.g. if your data attribute is named `"data-original-set"`, just pass `"original-set"`                                                                                                                                       | `"srcset"`    |
-| `data_sizes`        | The name of the data attribute containing the sizes attribute to use, excluding the `"data-"` part. E.g. if your data attribute is named `"data-sizes"`, just pass `"sizes"`                                                                                                                                                                                          | `"sizes"`     |
-| `class_loading`     | The class applied to the elements while the loading is in progress.                                                                                                                                                                                                                                                                                                   | `"loading"`   |
-| `class_loaded`      | The class applied to the elements when the loading is complete                                                                                                                                                                                                                                                                                                        | `"loaded"`    |
-| `class_error`       | The class applied to the elements when the element causes an error                                                                                                                                                                                                                                                                                                    | `"error"`     |
-| `to_webp`           | A boolean flag that activates the dynamic switch to WEBP feature. [More info](#switch-to-webp).                                                                                                                                                                                                                                                                       | `false`       |
-| `load_delay`        | [**Available only in version 10.16.1-beta**] The time (in milliseconds) each image needs to stay inside the viewport before its loading begins.                                                                                                                                                                                                                       | `0`           |
-| `callback_enter`    | A function to be called when the DOM element enters the viewport.                                                                                                                                                                                                                                                                                                     | `null`        |
-| `callback_set`      | A function to be called after the src of an image is set in the DOM.                                                                                                                                                                                                                                                                                                  | `null`        |
-| `callback_load`     | A function to be called when an element was loaded.                                                                                                                                                                                                                                                                                                                   | `null`        |
-| `callback_error`    | A function to be called when an element triggers an error.                                                                                                                                                                                                                                                                                                            | `null`        |
+| Name                | Meaning                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Default value | Example value                            |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ---------------------------------------- |
+| `container`         | The scrolling container, and the container of the elements in the `elements_selector` option.                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `document`    | `document.querySelector('.scrollPanel')` |
+| `elements_selector` | The string CSS selector of the elements to load lazily, to be selected as descendants of the `container` object.                                                                                                                                                                                                                                                                                                                                                                                                                                        | `"img"`       | `".images img.lazy"`                     |
+| `threshold`         | A number of pixels representing the outer distance from of the scrolling area from which to start loading the elements.                                                                                                                                                                                                                                                                                                                                                                                                                                 | `300`         | `0`                                      |
+| `thresholds`        | Similar to `threshold`, but accepting multiple values and both `px` and `%` units. It maps directly to the `rootMargin` property of `IntersectionObserver` ([read more](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin)), so it must be a string with a syntax similar to the CSS `margin` property. You can use it when you need to have different thresholds for the scrolling area. It overrides `threshold` when passed.<br>Available only in version 10.x, it gracefully degrades to `threshold` on version 8.x. | `null`        | `"500px 10%"`                            |
+| `data_src`          | The name of the data attribute containing the original image source, excluding the `"data-"` part. E.g. if your data attribute is named `"data-src"`, just pass `"src"`                                                                                                                                                                                                                                                                                                                                                                                 | `"src"`       | `"original"`                             |
+| `data_srcset`       | The name of the data attribute containing the original image source set in either `img` and `source` tags, excluding the `"data-"` part. E.g. if your data attribute is named `"data-srcset"`, just pass `"srcset"`                                                                                                                                                                                                                                                                                                                                     | `"srcset"`    | `"original-set"`                         |
+| `data_sizes`        | The name of the data attribute containing the sizes attribute to use, excluding the `"data-"` part. E.g. if your data attribute is named `"data-sizes"`, just pass `"sizes"`                                                                                                                                                                                                                                                                                                                                                                            | `"sizes"`     | `null`                                   |
+| `data_bg`           | The name of the data attribute containing the value of `background-image` to load lazily, excluding the `"data-"` part. E.g. if your data attribute is named `"data-bg"`, just pass `"bg"`. The attribute value must be a valid value for `background-image`, including the `url()` part of the CSS instruction.                                                                                                                                                                                                                                        | `"bg"`        | `"url(img1.jpg), url(img2.jpg)"`         |
+| `class_loading`     | The class applied to the elements while the loading is in progress.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `"loading"`   | `"lazy-loading"`                         |
+| `class_loaded`      | The class applied to the elements when the loading is complete                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `"loaded"`    | `"lazy-loaded"`                          |
+| `class_error`       | The class applied to the elements when the element causes an error                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `"error"`     | `"lazy-error"`                           |
+| `to_webp`           | A boolean flag that activates the dynamic switch to WEBP feature. [More info](#switch-to-webp).                                                                                                                                                                                                                                                                                                                                                                                                                                                         | `false`       | `true`                                   |
+| `load_delay`        | The time (in milliseconds) each image needs to stay inside the viewport before its loading begins.<br>Available only in version 10.x, gracefully degrades on version 8.x                                                                                                                                                                                                                                                                                                                                                                                | `0`           | `300`                                    |
+| `callback_enter`    | A function to be called when the DOM element enters the viewport.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `null`        | `(el)=>{console.log("Entered", el)}`     |
+| `callback_set`      | A function to be called after the src of an image is set in the DOM.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | `null`        | `(el)=>{console.log("Set", el)}`         |
+| `callback_load`     | A function to be called when an element was loaded.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | `null`        | `(el)=>{console.log("Loaded", el)}`      |
+| `callback_error`    | A function to be called when an element triggers an error.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `null`        | `(el)=>{console.log("Error", el)}`       |
 
@@ -747,0 +754,0 @@ ### Methods

src/lazyload.defaults.js

@@ -9,2 +9,3 @@ export default () => ({
 	data_sizes: "sizes",
+	data_bg: "bg",
 	class_loading: "loading",
@@ -11,0 +12,0 @@ class_loaded: "loaded",

src/lazyload.setSources.js

@@ -65,2 +65,3 @@ import { getData } from "./lazyload.data";
 	const srcDataValue = getData(element, settings.data_src);
+	const bgDataValue = getData(element, settings.data_bg);
 
@@ -71,2 +72,7 @@ if (srcDataValue) {
 	}
+
+	if (bgDataValue) {
+		let setValue = replaceExtToWebp(bgDataValue, toWebpFlag);
+		element.style.backgroundImage = setValue;
+	}
 };
@@ -73,0 +79,0 @@

No alert changes

Improved metrics

Total package byte prevSize

1112835

increased by0.83%

Lines of code

2381

increased by1.28%

Number of lines in readme file

784

increased by0.9%

No dependency changes