Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
vanilla-lazyload
Advanced tools
vanilla-lazyload - npm Package Compare versions
Comparing version 15.0.0 to 15.1.0
@@ -5,2 +5,8 @@ # CHANGELOG | ||
| #### 15.1.0 | ||
| Lazy background images just gained support for hiDPI ("retina") screens! | ||
| Place your standard resolution images in the `data-bg` attribute and your hiDPI images in `data-bg-hidpi`. | ||
| Same for `data-bg-multi` and `data-bg-multi-hidpi`. | ||
| #### 15.0.0 | ||
@@ -23,3 +29,3 @@ | ||
| - Fixed error TS1036: Statements are not allowed in ambient contexts. Closes #427 | ||
| Fixed error TS1036: Statements are not allowed in ambient contexts. Closes #427 | ||
@@ -26,0 +32,0 @@ #### 14.0.0 |
@@ -25,2 +25,3 @@ define(function () { 'use strict'; | ||
| var supportsClassList = runningOnBrowser && "classList" in document.createElement("p"); | ||
| var isHiDpi = runningOnBrowser && window.devicePixelRatio > 1; | ||
@@ -36,3 +37,5 @@ var defaultSettings = { | ||
| data_bg: "bg", | ||
| data_bg_hidpi: "bg-hidpi", | ||
| data_bg_multi: "bg-multi", | ||
| data_bg_multi_hidpi: "bg-multi-hidpi", | ||
| data_poster: "poster", | ||
@@ -259,4 +262,3 @@ class_applied: "applied", | ||
| var setBackground = function setBackground(element, settings, instance) { | ||
| var srcDataValue = getData(element, settings.data_bg); // TODO: GET 2X WHEN DEVICEPIXELRATIO >= 1.5 | ||
| var srcDataValue = getData(element, isHiDpi ? settings.data_bg_hidpi : settings.data_bg); | ||
| if (!srcDataValue) return; | ||
@@ -276,4 +278,3 @@ element.style.backgroundImage = "url(\"".concat(srcDataValue, "\")"); | ||
| var setMultiBackground = function setMultiBackground(element, settings, instance) { | ||
| var bgDataValue = getData(element, settings.data_bg_multi); // TODO: GET 2X WHEN DEVICEPIXELRATIO >= 1.5 | ||
| var bgDataValue = getData(element, isHiDpi ? settings.data_bg_multi_hidpi : settings.data_bg_multi); | ||
| if (!bgDataValue) return; | ||
@@ -280,0 +281,0 @@ element.style.backgroundImage = bgDataValue; // Annotate and notify applied |
@@ -1,1 +0,1 @@ | ||
| define((function(){"use strict";function t(){return(t=Object.assign||function(t){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&(t[a]=e[a])}return t}).apply(this,arguments)}var n="undefined"!=typeof window,e=n&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),a=n&&"IntersectionObserver"in window,o=n&&"classList"in document.createElement("p"),i={elements_selector:"img",container:e||n?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_multi:"bg-multi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",load_delay:0,auto_unobserve:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,use_native:!1},r=function(n){return t({},i,n)},l=function(t,n){var e,a=new t(n);try{e=new CustomEvent("LazyLoad::Initialized",{detail:{instance:a}})}catch(t){(e=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:a})}window.dispatchEvent(e)},c=function(t,n){return t.getAttribute("data-"+n)},s=function(t,n,e){var a="data-"+n;null!==e?t.setAttribute(a,e):t.removeAttribute(a)},u=function(t,n){return s(t,"ll-status",n)},d=function(t,n){return s(t,"ll-timeout",n)},f=function(t){return c(t,"ll-timeout")},_=function(t,n,e,a){t&&(void 0===a?void 0===e?t(n):t(n,e):t(n,e,a))},g=function(t,n){o?t.classList.add(n):t.className+=(t.className?" ":"")+n},v=function(t,n){o?t.classList.remove(n):t.className=t.className.replace(new RegExp("(^|\\s+)"+n+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},b=function(t){return t.llTempImage},h=function(t){t&&(t.loadingCount+=1)},p=function(t){for(var n,e=[],a=0;n=t.children[a];a+=1)"SOURCE"===n.tagName&&e.push(n);return e},m=function(t,n,e){e&&t.setAttribute(n,e)},E=function(t,n){m(t,"sizes",c(t,n.data_sizes)),m(t,"srcset",c(t,n.data_srcset)),m(t,"src",c(t,n.data_src))},y={IMG:function(t,n){var e=t.parentNode;e&&"PICTURE"===e.tagName&&p(e).forEach((function(t){E(t,n)}));E(t,n)},IFRAME:function(t,n){m(t,"src",c(t,n.data_src))},VIDEO:function(t,n){p(t).forEach((function(t){m(t,"src",c(t,n.data_src))})),m(t,"poster",c(t,n.data_poster)),m(t,"src",c(t,n.data_src)),t.load()}},I=function(t,n,e){var a=y[t.tagName];a&&(a(t,n),h(e),g(t,n.class_loading),u(t,"loading"),_(n.callback_loading,t,e),_(n.callback_reveal,t,e))},k=["IMG","IFRAME","VIDEO"],w=function(t,n){!n||n.toLoadCount||n.loadingCount||_(t.callback_finish,n)},L=function(t,n,e){t.addEventListener(n,e)},C=function(t,n,e){t.removeEventListener(n,e)},A=function(t,n,e){C(t,"load",n),C(t,"loadeddata",n),C(t,"error",e)},O=function(t,n,e){!function(t){delete t.llTempImage}(t),function(t,n){n&&(n.loadingCount-=1)}(0,e),v(t,n.class_loading)},z=function(t,n,e){var a=b(t)||t,o=function o(r){!function(t,n,e,a){O(n,e,a),g(n,e.class_loaded),u(n,"loaded"),_(e.callback_loaded,n,a),w(e,a)}(0,t,n,e),A(a,o,i)},i=function i(r){!function(t,n,e,a){O(n,e,a),g(n,e.class_error),u(n,"error"),_(e.callback_error,n,a),w(e,a)}(0,t,n,e),A(a,o,i)};!function(t,n,e){L(t,"load",n),L(t,"loadeddata",n),L(t,"error",e)}(a,o,i)},N=function(t,n){n&&(n.toLoadCount-=1)},M=function(t,n,e){!function(t){t.llTempImage=document.createElement("img")}(t),z(t,n,e),function(t,n,e){var a=c(t,n.data_bg);a&&(t.style.backgroundImage='url("'.concat(a,'")'),b(t).setAttribute("src",a),h(e),g(t,n.class_loading),u(t,"loading"),_(n.callback_loading,t,e),_(n.callback_reveal,t,e))}(t,n,e),function(t,n,e){var a=c(t,n.data_bg_multi);a&&(t.style.backgroundImage=a,g(t,n.class_applied),u(t,"applied"),_(n.callback_applied,t,e))}(t,n,e)},R=function(t,n,e){!function(t){return k.indexOf(t.tagName)>-1}(t)?M(t,n,e):function(t,n,e){z(t,n,e),I(t,n,e)}(t,n,e),N(0,e),function(t,n){if(n){var e=n._observer;e&&n._settings.auto_unobserve&&e.unobserve(t)}}(t,e),w(n,e)},T=function(t){var n=f(t);n&&(clearTimeout(n),d(t,null))},x=function(t,n,e){var a=e._settings;_(a.callback_enter,t,n,e),a.load_delay?function(t,n,e){var a=n.load_delay,o=f(t);o||(o=setTimeout((function(){R(t,n,e),T(t)}),a),d(t,o))}(t,a,e):R(t,a,e)},F=["IMG","IFRAME"],G=function(t){return t.use_native&&"loading"in HTMLImageElement.prototype},j=function(t,n,e){t.forEach((function(t){-1!==F.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),function(t,n,e){z(t,n,e),I(t,n,e),N(0,e),u(t,"native"),w(n,e)}(t,n,e))})),e.toLoadCount=0},D=function(t,n){!function(t){t.disconnect()}(t),function(t,n){n.forEach((function(n){t.observe(n),u(n,"observed")}))}(t,n)},P=function(t){var n;a&&!G(t._settings)&&(t._observer=new IntersectionObserver((function(n){n.forEach((function(n){return function(t){return t.isIntersecting||t.intersectionRatio>0}(n)?x(n.target,n,t):function(t,n,e){var a=e._settings;_(a.callback_exit,t,n,e),a.load_delay&&T(t)}(n.target,n,t)}))}),{root:(n=t._settings).container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}))},S=function(t){return Array.prototype.slice.call(t)},U=function(t){return t.container.querySelectorAll(t.elements_selector)},V=function(t){return!function(t){return null!==c(t,"ll-status")}(t)||function(t){return"observed"===c(t,"ll-status")}(t)},$=function(t){return function(t){return"error"===c(t,"ll-status")}(t)},q=function(t,n){return function(t){return S(t).filter(V)}(t||U(n))},H=function(t){var n,e=t._settings;(n=U(e),S(n).filter($)).forEach((function(t){v(t,e.class_error),function(t){s(t,"ll-status",null)}(t)})),t.update()},B=function(t,e){var a;this._settings=r(t),this.loadingCount=0,P(this),a=this,n&&window.addEventListener("online",(function(t){H(a)})),this.update(e)};return B.prototype={update:function(t){var n=this._settings,o=q(t,n);this.toLoadCount=o.length,!e&&a?G(n)?j(o,n,this):D(this._observer,o):this.loadAll(o)},destroy:function(){this._observer&&this._observer.disconnect(),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var n=this,e=this._settings;q(t,e).forEach((function(t){R(t,e,n)}))},load:function(t){R(t,this._settings,this)}},B.load=function(t,n){var e=r(n);R(t,e)},n&&function(t,n){if(n)if(n.length)for(var e,a=0;e=n[a];a+=1)l(t,e);else l(t,n)}(B,window.lazyLoadOptions),B})); | ||
| define((function(){"use strict";function t(){return(t=Object.assign||function(t){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&(t[a]=e[a])}return t}).apply(this,arguments)}var n="undefined"!=typeof window,e=n&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),a=n&&"IntersectionObserver"in window,i=n&&"classList"in document.createElement("p"),o=n&&window.devicePixelRatio>1,r={elements_selector:"img",container:e||n?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",load_delay:0,auto_unobserve:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,use_native:!1},l=function(n){return t({},r,n)},c=function(t,n){var e,a=new t(n);try{e=new CustomEvent("LazyLoad::Initialized",{detail:{instance:a}})}catch(t){(e=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:a})}window.dispatchEvent(e)},s=function(t,n){return t.getAttribute("data-"+n)},u=function(t,n,e){var a="data-"+n;null!==e?t.setAttribute(a,e):t.removeAttribute(a)},d=function(t,n){return u(t,"ll-status",n)},f=function(t,n){return u(t,"ll-timeout",n)},_=function(t){return s(t,"ll-timeout")},g=function(t,n,e,a){t&&(void 0===a?void 0===e?t(n):t(n,e):t(n,e,a))},v=function(t,n){i?t.classList.add(n):t.className+=(t.className?" ":"")+n},b=function(t,n){i?t.classList.remove(n):t.className=t.className.replace(new RegExp("(^|\\s+)"+n+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},h=function(t){return t.llTempImage},p=function(t){t&&(t.loadingCount+=1)},m=function(t){for(var n,e=[],a=0;n=t.children[a];a+=1)"SOURCE"===n.tagName&&e.push(n);return e},E=function(t,n,e){e&&t.setAttribute(n,e)},y=function(t,n){E(t,"sizes",s(t,n.data_sizes)),E(t,"srcset",s(t,n.data_srcset)),E(t,"src",s(t,n.data_src))},w={IMG:function(t,n){var e=t.parentNode;e&&"PICTURE"===e.tagName&&m(e).forEach((function(t){y(t,n)}));y(t,n)},IFRAME:function(t,n){E(t,"src",s(t,n.data_src))},VIDEO:function(t,n){m(t).forEach((function(t){E(t,"src",s(t,n.data_src))})),E(t,"poster",s(t,n.data_poster)),E(t,"src",s(t,n.data_src)),t.load()}},I=function(t,n,e){var a=w[t.tagName];a&&(a(t,n),p(e),v(t,n.class_loading),d(t,"loading"),g(n.callback_loading,t,e),g(n.callback_reveal,t,e))},k=["IMG","IFRAME","VIDEO"],L=function(t,n){!n||n.toLoadCount||n.loadingCount||g(t.callback_finish,n)},C=function(t,n,e){t.addEventListener(n,e)},A=function(t,n,e){t.removeEventListener(n,e)},O=function(t,n,e){A(t,"load",n),A(t,"loadeddata",n),A(t,"error",e)},z=function(t,n,e){!function(t){delete t.llTempImage}(t),function(t,n){n&&(n.loadingCount-=1)}(0,e),b(t,n.class_loading)},N=function(t,n,e){var a=h(t)||t,i=function i(r){!function(t,n,e,a){z(n,e,a),v(n,e.class_loaded),d(n,"loaded"),g(e.callback_loaded,n,a),L(e,a)}(0,t,n,e),O(a,i,o)},o=function o(r){!function(t,n,e,a){z(n,e,a),v(n,e.class_error),d(n,"error"),g(e.callback_error,n,a),L(e,a)}(0,t,n,e),O(a,i,o)};!function(t,n,e){C(t,"load",n),C(t,"loadeddata",n),C(t,"error",e)}(a,i,o)},M=function(t,n){n&&(n.toLoadCount-=1)},R=function(t,n,e){!function(t){t.llTempImage=document.createElement("img")}(t),N(t,n,e),function(t,n,e){var a=s(t,o?n.data_bg_hidpi:n.data_bg);a&&(t.style.backgroundImage='url("'.concat(a,'")'),h(t).setAttribute("src",a),p(e),v(t,n.class_loading),d(t,"loading"),g(n.callback_loading,t,e),g(n.callback_reveal,t,e))}(t,n,e),function(t,n,e){var a=s(t,o?n.data_bg_multi_hidpi:n.data_bg_multi);a&&(t.style.backgroundImage=a,v(t,n.class_applied),d(t,"applied"),g(n.callback_applied,t,e))}(t,n,e)},x=function(t,n,e){!function(t){return k.indexOf(t.tagName)>-1}(t)?R(t,n,e):function(t,n,e){N(t,n,e),I(t,n,e)}(t,n,e),M(0,e),function(t,n){if(n){var e=n._observer;e&&n._settings.auto_unobserve&&e.unobserve(t)}}(t,e),L(n,e)},T=function(t){var n=_(t);n&&(clearTimeout(n),f(t,null))},F=function(t,n,e){var a=e._settings;g(a.callback_enter,t,n,e),a.load_delay?function(t,n,e){var a=n.load_delay,i=_(t);i||(i=setTimeout((function(){x(t,n,e),T(t)}),a),f(t,i))}(t,a,e):x(t,a,e)},G=["IMG","IFRAME"],P=function(t){return t.use_native&&"loading"in HTMLImageElement.prototype},j=function(t,n,e){t.forEach((function(t){-1!==G.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),function(t,n,e){N(t,n,e),I(t,n,e),M(0,e),d(t,"native"),L(n,e)}(t,n,e))})),e.toLoadCount=0},D=function(t,n){!function(t){t.disconnect()}(t),function(t,n){n.forEach((function(n){t.observe(n),d(n,"observed")}))}(t,n)},S=function(t){var n;a&&!P(t._settings)&&(t._observer=new IntersectionObserver((function(n){n.forEach((function(n){return function(t){return t.isIntersecting||t.intersectionRatio>0}(n)?F(n.target,n,t):function(t,n,e){var a=e._settings;g(a.callback_exit,t,n,e),a.load_delay&&T(t)}(n.target,n,t)}))}),{root:(n=t._settings).container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}))},U=function(t){return Array.prototype.slice.call(t)},V=function(t){return t.container.querySelectorAll(t.elements_selector)},$=function(t){return!function(t){return null!==s(t,"ll-status")}(t)||function(t){return"observed"===s(t,"ll-status")}(t)},q=function(t){return function(t){return"error"===s(t,"ll-status")}(t)},H=function(t,n){return function(t){return U(t).filter($)}(t||V(n))},B=function(t){var n,e=t._settings;(n=V(e),U(n).filter(q)).forEach((function(t){b(t,e.class_error),function(t){u(t,"ll-status",null)}(t)})),t.update()},J=function(t,e){var a;this._settings=l(t),this.loadingCount=0,S(this),a=this,n&&window.addEventListener("online",(function(t){B(a)})),this.update(e)};return J.prototype={update:function(t){var n=this._settings,i=H(t,n);this.toLoadCount=i.length,!e&&a?P(n)?j(i,n,this):D(this._observer,i):this.loadAll(i)},destroy:function(){this._observer&&this._observer.disconnect(),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var n=this,e=this._settings;H(t,e).forEach((function(t){x(t,e,n)}))},load:function(t){x(t,this._settings,this)}},J.load=function(t,n){var e=l(n);x(t,e)},n&&function(t,n){if(n)if(n.length)for(var e,a=0;e=n[a];a+=1)c(t,e);else c(t,n)}(J,window.lazyLoadOptions),J})); |
| const runningOnBrowser = typeof window !== "undefined"; | ||
| const isBot = | ||
| (runningOnBrowser && !("onscroll" in window)) || | ||
| (typeof navigator !== "undefined" && | ||
| /(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent)); | ||
| (runningOnBrowser && !("onscroll" in window)) || | ||
| (typeof navigator !== "undefined" && /(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent)); | ||
| const supportsIntersectionObserver = | ||
| runningOnBrowser && "IntersectionObserver" in window; | ||
| const supportsIntersectionObserver = runningOnBrowser && "IntersectionObserver" in window; | ||
| const supportsClassList = | ||
| runningOnBrowser && "classList" in document.createElement("p"); | ||
| const supportsClassList = runningOnBrowser && "classList" in document.createElement("p"); | ||
| const isHiDpi = runningOnBrowser && window.devicePixelRatio > 1; | ||
| const defaultSettings = { | ||
@@ -23,3 +22,5 @@ elements_selector: "img", | ||
| data_bg: "bg", | ||
| data_bg_hidpi: "bg-hidpi", | ||
| data_bg_multi: "bg-multi", | ||
| data_bg_multi_hidpi: "bg-multi-hidpi", | ||
| data_poster: "poster", | ||
@@ -236,3 +237,3 @@ class_applied: "applied", | ||
| const setBackground = (element, settings, instance) => { | ||
| const srcDataValue = getData(element, settings.data_bg); // TODO: GET 2X WHEN DEVICEPIXELRATIO >= 1.5 | ||
| const srcDataValue = getData(element, isHiDpi ? settings.data_bg_hidpi : settings.data_bg); | ||
| if (!srcDataValue) return; | ||
@@ -253,3 +254,6 @@ element.style.backgroundImage = `url("${srcDataValue}")`; | ||
| const setMultiBackground = (element, settings, instance) => { | ||
| const bgDataValue = getData(element, settings.data_bg_multi); // TODO: GET 2X WHEN DEVICEPIXELRATIO >= 1.5 | ||
| const bgDataValue = getData( | ||
| element, | ||
| isHiDpi ? settings.data_bg_multi_hidpi : settings.data_bg_multi | ||
| ); | ||
| if (!bgDataValue) return; | ||
@@ -256,0 +260,0 @@ element.style.backgroundImage = bgDataValue; |
@@ -1,1 +0,1 @@ | ||
| const e="undefined"!=typeof window,t=e&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),a=e&&"IntersectionObserver"in window,l=e&&"classList"in document.createElement("p"),s={elements_selector:"img",container:t||e?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_multi:"bg-multi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",load_delay:0,auto_unobserve:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,use_native:!1},o=e=>Object.assign({},s,e),n=function(e,t){var a;let l=new e(t);try{a=new CustomEvent("LazyLoad::Initialized",{detail:{instance:l}})}catch(e){(a=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:l})}window.dispatchEvent(a)},r=(e,t)=>e.getAttribute("data-"+t),i=(e,t,a)=>{var l="data-"+t;null!==a?e.setAttribute(l,a):e.removeAttribute(l)},c=(e,t)=>i(e,"ll-status",t),d=(e,t)=>i(e,"ll-timeout",t),u=e=>r(e,"ll-timeout"),_=(e,t,a,l)=>{e&&(void 0===l?void 0===a?e(t):e(t,a):e(t,a,l))},g=(e,t)=>{l?e.classList.add(t):e.className+=(e.className?" ":"")+t},b=(e,t)=>{l?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},h=e=>e.llTempImage,m=e=>{e&&(e.loadingCount+=1)},p=e=>{let t=[];for(let a,l=0;a=e.children[l];l+=1)"SOURCE"===a.tagName&&t.push(a);return t},v=(e,t,a)=>{a&&e.setAttribute(t,a)},f=(e,t)=>{v(e,"sizes",r(e,t.data_sizes)),v(e,"srcset",r(e,t.data_srcset)),v(e,"src",r(e,t.data_src))},E={IMG:(e,t)=>{const a=e.parentNode;if(a&&"PICTURE"===a.tagName){p(a).forEach(e=>{f(e,t)})}f(e,t)},IFRAME:(e,t)=>{v(e,"src",r(e,t.data_src))},VIDEO:(e,t)=>{p(e).forEach(e=>{v(e,"src",r(e,t.data_src))}),v(e,"poster",r(e,t.data_poster)),v(e,"src",r(e,t.data_src)),e.load()}},I=(e,t,a)=>{const l=E[e.tagName];l&&(l(e,t),m(a),g(e,t.class_loading),c(e,"loading"),_(t.callback_loading,e,a),_(t.callback_reveal,e,a))},k=["IMG","IFRAME","VIDEO"],y=(e,t)=>{!t||t.toLoadCount||t.loadingCount||_(e.callback_finish,t)},w=(e,t,a)=>{e.addEventListener(t,a)},L=(e,t,a)=>{e.removeEventListener(t,a)},C=(e,t,a)=>{L(e,"load",t),L(e,"loadeddata",t),L(e,"error",a)},A=(e,t,a)=>{(e=>{delete e.llTempImage})(e),((e,t)=>{t&&(t.loadingCount-=1)})(0,a),b(e,t.class_loading)},z=(e,t,a)=>{const l=h(e)||e,s=n=>{((e,t,a,l)=>{A(t,a,l),g(t,a.class_loaded),c(t,"loaded"),_(a.callback_loaded,t,l),y(a,l)})(0,e,t,a),C(l,s,o)},o=n=>{((e,t,a,l)=>{A(t,a,l),g(t,a.class_error),c(t,"error"),_(a.callback_error,t,l),y(a,l)})(0,e,t,a),C(l,s,o)};((e,t,a)=>{w(e,"load",t),w(e,"loadeddata",t),w(e,"error",a)})(l,s,o)},N=(e,t)=>{t&&(t.toLoadCount-=1)},O=(e,t,a)=>{(e=>{e.llTempImage=document.createElement("img")})(e),z(e,t,a),((e,t,a)=>{const l=r(e,t.data_bg);l&&(e.style.backgroundImage=`url("${l}")`,h(e).setAttribute("src",l),m(a),g(e,t.class_loading),c(e,"loading"),_(t.callback_loading,e,a),_(t.callback_reveal,e,a))})(e,t,a),((e,t,a)=>{const l=r(e,t.data_bg_multi);l&&(e.style.backgroundImage=l,g(e,t.class_applied),c(e,"applied"),_(t.callback_applied,e,a))})(e,t,a)},M=(e,t,a)=>{(e=>k.indexOf(e.tagName)>-1)(e)?((e,t,a)=>{z(e,t,a),I(e,t,a)})(e,t,a):O(e,t,a),N(0,a),((e,t)=>{if(!t)return;const a=t._observer;a&&t._settings.auto_unobserve&&a.unobserve(e)})(e,a),y(t,a)},x=e=>{var t=u(e);t&&(clearTimeout(t),d(e,null))},R=(e,t,a)=>{const l=a._settings;_(l.callback_enter,e,t,a),l.load_delay?((e,t,a)=>{const l=t.load_delay;let s=u(e);s||(s=setTimeout((function(){M(e,t,a),x(e)}),l),d(e,s))})(e,l,a):M(e,l,a)},T=["IMG","IFRAME"],F=e=>e.use_native&&"loading"in HTMLImageElement.prototype,G=(e,t,a)=>{e.forEach(e=>{-1!==T.indexOf(e.tagName)&&(e.setAttribute("loading","lazy"),((e,t,a)=>{z(e,t,a),I(e,t,a),N(0,a),c(e,"native"),y(t,a)})(e,t,a))}),a.toLoadCount=0},$=(e,t)=>{(e=>{e.disconnect()})(e),((e,t)=>{t.forEach(t=>{e.observe(t),c(t,"observed")})})(e,t)},D=e=>{var t;a&&!F(e._settings)&&(e._observer=new IntersectionObserver(t=>{t.forEach(t=>(e=>e.isIntersecting||e.intersectionRatio>0)(t)?R(t.target,t,e):((e,t,a)=>{const l=a._settings;_(l.callback_exit,e,t,a),l.load_delay&&x(e)})(t.target,t,e))},{root:(t=e._settings).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))},S=e=>Array.prototype.slice.call(e),U=e=>e.container.querySelectorAll(e.elements_selector),V=e=>!(e=>null!==r(e,"ll-status"))(e)||(e=>"observed"===r(e,"ll-status"))(e),j=e=>(e=>"error"===r(e,"ll-status"))(e),q=(e,t)=>(e=>S(e).filter(V))(e||U(t)),H=e=>{const t=e._settings;var a;(a=U(t),S(a).filter(j)).forEach(e=>{b(e,t.class_error),(e=>{i(e,"ll-status",null)})(e)}),e.update()},P=function(t,a){var l;this._settings=o(t),this.loadingCount=0,D(this),l=this,e&&window.addEventListener("online",e=>{H(l)}),this.update(a)};P.prototype={update:function(e){const l=this._settings,s=q(e,l);this.toLoadCount=s.length,!t&&a?F(l)?G(s,l,this):$(this._observer,s):this.loadAll(s)},destroy:function(){this._observer&&this._observer.disconnect(),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(e){const t=this._settings;q(e,t).forEach(e=>{M(e,t,this)})},load:function(e){M(e,this._settings,this)}},P.load=(e,t)=>{const a=o(t);M(e,a)},e&&((e,t)=>{if(t)if(t.length)for(let a,l=0;a=t[l];l+=1)n(e,a);else n(e,t)})(P,window.lazyLoadOptions);export default P; | ||
| const t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),a=t&&"IntersectionObserver"in window,l=t&&"classList"in document.createElement("p"),s=t&&window.devicePixelRatio>1,o={elements_selector:"img",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",load_delay:0,auto_unobserve:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,use_native:!1},n=t=>Object.assign({},o,t),i=function(t,e){var a;let l=new t(e);try{a=new CustomEvent("LazyLoad::Initialized",{detail:{instance:l}})}catch(t){(a=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:l})}window.dispatchEvent(a)},r=(t,e)=>t.getAttribute("data-"+e),d=(t,e,a)=>{var l="data-"+e;null!==a?t.setAttribute(l,a):t.removeAttribute(l)},c=(t,e)=>d(t,"ll-status",e),_=(t,e)=>d(t,"ll-timeout",e),u=t=>r(t,"ll-timeout"),g=(t,e,a,l)=>{t&&(void 0===l?void 0===a?t(e):t(e,a):t(e,a,l))},b=(t,e)=>{l?t.classList.add(e):t.className+=(t.className?" ":"")+e},h=(t,e)=>{l?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},p=t=>t.llTempImage,m=t=>{t&&(t.loadingCount+=1)},v=t=>{let e=[];for(let a,l=0;a=t.children[l];l+=1)"SOURCE"===a.tagName&&e.push(a);return e},f=(t,e,a)=>{a&&t.setAttribute(e,a)},E=(t,e)=>{f(t,"sizes",r(t,e.data_sizes)),f(t,"srcset",r(t,e.data_srcset)),f(t,"src",r(t,e.data_src))},I={IMG:(t,e)=>{const a=t.parentNode;if(a&&"PICTURE"===a.tagName){v(a).forEach(t=>{E(t,e)})}E(t,e)},IFRAME:(t,e)=>{f(t,"src",r(t,e.data_src))},VIDEO:(t,e)=>{v(t).forEach(t=>{f(t,"src",r(t,e.data_src))}),f(t,"poster",r(t,e.data_poster)),f(t,"src",r(t,e.data_src)),t.load()}},k=(t,e,a)=>{const l=I[t.tagName];l&&(l(t,e),m(a),b(t,e.class_loading),c(t,"loading"),g(e.callback_loading,t,a),g(e.callback_reveal,t,a))},w=["IMG","IFRAME","VIDEO"],y=(t,e)=>{!e||e.toLoadCount||e.loadingCount||g(t.callback_finish,e)},L=(t,e,a)=>{t.addEventListener(e,a)},C=(t,e,a)=>{t.removeEventListener(e,a)},A=(t,e,a)=>{C(t,"load",e),C(t,"loadeddata",e),C(t,"error",a)},z=(t,e,a)=>{(t=>{delete t.llTempImage})(t),((t,e)=>{e&&(e.loadingCount-=1)})(0,a),h(t,e.class_loading)},N=(t,e,a)=>{const l=p(t)||t,s=n=>{((t,e,a,l)=>{z(e,a,l),b(e,a.class_loaded),c(e,"loaded"),g(a.callback_loaded,e,l),y(a,l)})(0,t,e,a),A(l,s,o)},o=n=>{((t,e,a,l)=>{z(e,a,l),b(e,a.class_error),c(e,"error"),g(a.callback_error,e,l),y(a,l)})(0,t,e,a),A(l,s,o)};((t,e,a)=>{L(t,"load",e),L(t,"loadeddata",e),L(t,"error",a)})(l,s,o)},O=(t,e)=>{e&&(e.toLoadCount-=1)},x=(t,e,a)=>{(t=>{t.llTempImage=document.createElement("img")})(t),N(t,e,a),((t,e,a)=>{const l=r(t,s?e.data_bg_hidpi:e.data_bg);l&&(t.style.backgroundImage=`url("${l}")`,p(t).setAttribute("src",l),m(a),b(t,e.class_loading),c(t,"loading"),g(e.callback_loading,t,a),g(e.callback_reveal,t,a))})(t,e,a),((t,e,a)=>{const l=r(t,s?e.data_bg_multi_hidpi:e.data_bg_multi);l&&(t.style.backgroundImage=l,b(t,e.class_applied),c(t,"applied"),g(e.callback_applied,t,a))})(t,e,a)},M=(t,e,a)=>{(t=>w.indexOf(t.tagName)>-1)(t)?((t,e,a)=>{N(t,e,a),k(t,e,a)})(t,e,a):x(t,e,a),O(0,a),((t,e)=>{if(!e)return;const a=e._observer;a&&e._settings.auto_unobserve&&a.unobserve(t)})(t,a),y(e,a)},R=t=>{var e=u(t);e&&(clearTimeout(e),_(t,null))},T=(t,e,a)=>{const l=a._settings;g(l.callback_enter,t,e,a),l.load_delay?((t,e,a)=>{const l=e.load_delay;let s=u(t);s||(s=setTimeout((function(){M(t,e,a),R(t)}),l),_(t,s))})(t,l,a):M(t,l,a)},F=["IMG","IFRAME"],G=t=>t.use_native&&"loading"in HTMLImageElement.prototype,$=(t,e,a)=>{t.forEach(t=>{-1!==F.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),((t,e,a)=>{N(t,e,a),k(t,e,a),O(0,a),c(t,"native"),y(e,a)})(t,e,a))}),a.toLoadCount=0},D=(t,e)=>{(t=>{t.disconnect()})(t),((t,e)=>{e.forEach(e=>{t.observe(e),c(e,"observed")})})(t,e)},P=t=>{var e;a&&!G(t._settings)&&(t._observer=new IntersectionObserver(e=>{e.forEach(e=>(t=>t.isIntersecting||t.intersectionRatio>0)(e)?T(e.target,e,t):((t,e,a)=>{const l=a._settings;g(l.callback_exit,t,e,a),l.load_delay&&R(t)})(e.target,e,t))},{root:(e=t._settings).container===document?null:e.container,rootMargin:e.thresholds||e.threshold+"px"}))},S=t=>Array.prototype.slice.call(t),U=t=>t.container.querySelectorAll(t.elements_selector),V=t=>!(t=>null!==r(t,"ll-status"))(t)||(t=>"observed"===r(t,"ll-status"))(t),j=t=>(t=>"error"===r(t,"ll-status"))(t),q=(t,e)=>(t=>S(t).filter(V))(t||U(e)),H=t=>{const e=t._settings;var a;(a=U(e),S(a).filter(j)).forEach(t=>{h(t,e.class_error),(t=>{d(t,"ll-status",null)})(t)}),t.update()},B=function(e,a){var l;this._settings=n(e),this.loadingCount=0,P(this),l=this,t&&window.addEventListener("online",t=>{H(l)}),this.update(a)};B.prototype={update:function(t){const l=this._settings,s=q(t,l);this.toLoadCount=s.length,!e&&a?G(l)?$(s,l,this):D(this._observer,s):this.loadAll(s)},destroy:function(){this._observer&&this._observer.disconnect(),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){const e=this._settings;q(t,e).forEach(t=>{M(t,e,this)})},load:function(t){M(t,this._settings,this)}},B.load=(t,e)=>{const a=n(e);M(t,a)},t&&((t,e)=>{if(e)if(e.length)for(let a,l=0;a=e[l];l+=1)i(t,a);else i(t,e)})(B,window.lazyLoadOptions);export default B; |
@@ -26,2 +26,3 @@ var LazyLoad = (function () { | ||
| var supportsClassList = runningOnBrowser && "classList" in document.createElement("p"); | ||
| var isHiDpi = runningOnBrowser && window.devicePixelRatio > 1; | ||
@@ -37,3 +38,5 @@ var defaultSettings = { | ||
| data_bg: "bg", | ||
| data_bg_hidpi: "bg-hidpi", | ||
| data_bg_multi: "bg-multi", | ||
| data_bg_multi_hidpi: "bg-multi-hidpi", | ||
| data_poster: "poster", | ||
@@ -260,4 +263,3 @@ class_applied: "applied", | ||
| var setBackground = function setBackground(element, settings, instance) { | ||
| var srcDataValue = getData(element, settings.data_bg); // TODO: GET 2X WHEN DEVICEPIXELRATIO >= 1.5 | ||
| var srcDataValue = getData(element, isHiDpi ? settings.data_bg_hidpi : settings.data_bg); | ||
| if (!srcDataValue) return; | ||
@@ -277,4 +279,3 @@ element.style.backgroundImage = "url(\"".concat(srcDataValue, "\")"); | ||
| var setMultiBackground = function setMultiBackground(element, settings, instance) { | ||
| var bgDataValue = getData(element, settings.data_bg_multi); // TODO: GET 2X WHEN DEVICEPIXELRATIO >= 1.5 | ||
| var bgDataValue = getData(element, isHiDpi ? settings.data_bg_multi_hidpi : settings.data_bg_multi); | ||
| if (!bgDataValue) return; | ||
@@ -281,0 +282,0 @@ element.style.backgroundImage = bgDataValue; // Annotate and notify applied |
@@ -1,1 +0,1 @@ | ||
| var LazyLoad=function(){"use strict";function t(){return(t=Object.assign||function(t){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&(t[a]=e[a])}return t}).apply(this,arguments)}var n="undefined"!=typeof window,e=n&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),a=n&&"IntersectionObserver"in window,o=n&&"classList"in document.createElement("p"),i={elements_selector:"img",container:e||n?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_multi:"bg-multi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",load_delay:0,auto_unobserve:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,use_native:!1},r=function(n){return t({},i,n)},l=function(t,n){var e,a=new t(n);try{e=new CustomEvent("LazyLoad::Initialized",{detail:{instance:a}})}catch(t){(e=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:a})}window.dispatchEvent(e)},c=function(t,n){return t.getAttribute("data-"+n)},s=function(t,n,e){var a="data-"+n;null!==e?t.setAttribute(a,e):t.removeAttribute(a)},u=function(t,n){return s(t,"ll-status",n)},d=function(t,n){return s(t,"ll-timeout",n)},f=function(t){return c(t,"ll-timeout")},_=function(t,n,e,a){t&&(void 0===a?void 0===e?t(n):t(n,e):t(n,e,a))},g=function(t,n){o?t.classList.add(n):t.className+=(t.className?" ":"")+n},v=function(t,n){o?t.classList.remove(n):t.className=t.className.replace(new RegExp("(^|\\s+)"+n+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},b=function(t){return t.llTempImage},h=function(t){t&&(t.loadingCount+=1)},p=function(t){for(var n,e=[],a=0;n=t.children[a];a+=1)"SOURCE"===n.tagName&&e.push(n);return e},m=function(t,n,e){e&&t.setAttribute(n,e)},E=function(t,n){m(t,"sizes",c(t,n.data_sizes)),m(t,"srcset",c(t,n.data_srcset)),m(t,"src",c(t,n.data_src))},y={IMG:function(t,n){var e=t.parentNode;e&&"PICTURE"===e.tagName&&p(e).forEach((function(t){E(t,n)}));E(t,n)},IFRAME:function(t,n){m(t,"src",c(t,n.data_src))},VIDEO:function(t,n){p(t).forEach((function(t){m(t,"src",c(t,n.data_src))})),m(t,"poster",c(t,n.data_poster)),m(t,"src",c(t,n.data_src)),t.load()}},I=function(t,n,e){var a=y[t.tagName];a&&(a(t,n),h(e),g(t,n.class_loading),u(t,"loading"),_(n.callback_loading,t,e),_(n.callback_reveal,t,e))},k=["IMG","IFRAME","VIDEO"],L=function(t,n){!n||n.toLoadCount||n.loadingCount||_(t.callback_finish,n)},w=function(t,n,e){t.addEventListener(n,e)},C=function(t,n,e){t.removeEventListener(n,e)},A=function(t,n,e){C(t,"load",n),C(t,"loadeddata",n),C(t,"error",e)},z=function(t,n,e){!function(t){delete t.llTempImage}(t),function(t,n){n&&(n.loadingCount-=1)}(0,e),v(t,n.class_loading)},O=function(t,n,e){var a=b(t)||t,o=function o(r){!function(t,n,e,a){z(n,e,a),g(n,e.class_loaded),u(n,"loaded"),_(e.callback_loaded,n,a),L(e,a)}(0,t,n,e),A(a,o,i)},i=function i(r){!function(t,n,e,a){z(n,e,a),g(n,e.class_error),u(n,"error"),_(e.callback_error,n,a),L(e,a)}(0,t,n,e),A(a,o,i)};!function(t,n,e){w(t,"load",n),w(t,"loadeddata",n),w(t,"error",e)}(a,o,i)},N=function(t,n){n&&(n.toLoadCount-=1)},M=function(t,n,e){!function(t){t.llTempImage=document.createElement("img")}(t),O(t,n,e),function(t,n,e){var a=c(t,n.data_bg);a&&(t.style.backgroundImage='url("'.concat(a,'")'),b(t).setAttribute("src",a),h(e),g(t,n.class_loading),u(t,"loading"),_(n.callback_loading,t,e),_(n.callback_reveal,t,e))}(t,n,e),function(t,n,e){var a=c(t,n.data_bg_multi);a&&(t.style.backgroundImage=a,g(t,n.class_applied),u(t,"applied"),_(n.callback_applied,t,e))}(t,n,e)},R=function(t,n,e){!function(t){return k.indexOf(t.tagName)>-1}(t)?M(t,n,e):function(t,n,e){O(t,n,e),I(t,n,e)}(t,n,e),N(0,e),function(t,n){if(n){var e=n._observer;e&&n._settings.auto_unobserve&&e.unobserve(t)}}(t,e),L(n,e)},T=function(t){var n=f(t);n&&(clearTimeout(n),d(t,null))},x=function(t,n,e){var a=e._settings;_(a.callback_enter,t,n,e),a.load_delay?function(t,n,e){var a=n.load_delay,o=f(t);o||(o=setTimeout((function(){R(t,n,e),T(t)}),a),d(t,o))}(t,a,e):R(t,a,e)},F=["IMG","IFRAME"],G=function(t){return t.use_native&&"loading"in HTMLImageElement.prototype},j=function(t,n,e){t.forEach((function(t){-1!==F.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),function(t,n,e){O(t,n,e),I(t,n,e),N(0,e),u(t,"native"),L(n,e)}(t,n,e))})),e.toLoadCount=0},D=function(t,n){!function(t){t.disconnect()}(t),function(t,n){n.forEach((function(n){t.observe(n),u(n,"observed")}))}(t,n)},P=function(t){var n;a&&!G(t._settings)&&(t._observer=new IntersectionObserver((function(n){n.forEach((function(n){return function(t){return t.isIntersecting||t.intersectionRatio>0}(n)?x(n.target,n,t):function(t,n,e){var a=e._settings;_(a.callback_exit,t,n,e),a.load_delay&&T(t)}(n.target,n,t)}))}),{root:(n=t._settings).container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}))},S=function(t){return Array.prototype.slice.call(t)},U=function(t){return t.container.querySelectorAll(t.elements_selector)},V=function(t){return!function(t){return null!==c(t,"ll-status")}(t)||function(t){return"observed"===c(t,"ll-status")}(t)},$=function(t){return function(t){return"error"===c(t,"ll-status")}(t)},q=function(t,n){return function(t){return S(t).filter(V)}(t||U(n))},H=function(t){var n,e=t._settings;(n=U(e),S(n).filter($)).forEach((function(t){v(t,e.class_error),function(t){s(t,"ll-status",null)}(t)})),t.update()},B=function(t,e){var a;this._settings=r(t),this.loadingCount=0,P(this),a=this,n&&window.addEventListener("online",(function(t){H(a)})),this.update(e)};return B.prototype={update:function(t){var n=this._settings,o=q(t,n);this.toLoadCount=o.length,!e&&a?G(n)?j(o,n,this):D(this._observer,o):this.loadAll(o)},destroy:function(){this._observer&&this._observer.disconnect(),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var n=this,e=this._settings;q(t,e).forEach((function(t){R(t,e,n)}))},load:function(t){R(t,this._settings,this)}},B.load=function(t,n){var e=r(n);R(t,e)},n&&function(t,n){if(n)if(n.length)for(var e,a=0;e=n[a];a+=1)l(t,e);else l(t,n)}(B,window.lazyLoadOptions),B}(); | ||
| var LazyLoad=function(){"use strict";function t(){return(t=Object.assign||function(t){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&(t[a]=e[a])}return t}).apply(this,arguments)}var n="undefined"!=typeof window,e=n&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),a=n&&"IntersectionObserver"in window,o=n&&"classList"in document.createElement("p"),i=n&&window.devicePixelRatio>1,r={elements_selector:"img",container:e||n?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",load_delay:0,auto_unobserve:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,use_native:!1},l=function(n){return t({},r,n)},c=function(t,n){var e,a=new t(n);try{e=new CustomEvent("LazyLoad::Initialized",{detail:{instance:a}})}catch(t){(e=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:a})}window.dispatchEvent(e)},s=function(t,n){return t.getAttribute("data-"+n)},u=function(t,n,e){var a="data-"+n;null!==e?t.setAttribute(a,e):t.removeAttribute(a)},d=function(t,n){return u(t,"ll-status",n)},f=function(t,n){return u(t,"ll-timeout",n)},_=function(t){return s(t,"ll-timeout")},g=function(t,n,e,a){t&&(void 0===a?void 0===e?t(n):t(n,e):t(n,e,a))},v=function(t,n){o?t.classList.add(n):t.className+=(t.className?" ":"")+n},b=function(t,n){o?t.classList.remove(n):t.className=t.className.replace(new RegExp("(^|\\s+)"+n+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},h=function(t){return t.llTempImage},p=function(t){t&&(t.loadingCount+=1)},m=function(t){for(var n,e=[],a=0;n=t.children[a];a+=1)"SOURCE"===n.tagName&&e.push(n);return e},E=function(t,n,e){e&&t.setAttribute(n,e)},y=function(t,n){E(t,"sizes",s(t,n.data_sizes)),E(t,"srcset",s(t,n.data_srcset)),E(t,"src",s(t,n.data_src))},w={IMG:function(t,n){var e=t.parentNode;e&&"PICTURE"===e.tagName&&m(e).forEach((function(t){y(t,n)}));y(t,n)},IFRAME:function(t,n){E(t,"src",s(t,n.data_src))},VIDEO:function(t,n){m(t).forEach((function(t){E(t,"src",s(t,n.data_src))})),E(t,"poster",s(t,n.data_poster)),E(t,"src",s(t,n.data_src)),t.load()}},I=function(t,n,e){var a=w[t.tagName];a&&(a(t,n),p(e),v(t,n.class_loading),d(t,"loading"),g(n.callback_loading,t,e),g(n.callback_reveal,t,e))},k=["IMG","IFRAME","VIDEO"],L=function(t,n){!n||n.toLoadCount||n.loadingCount||g(t.callback_finish,n)},C=function(t,n,e){t.addEventListener(n,e)},A=function(t,n,e){t.removeEventListener(n,e)},z=function(t,n,e){A(t,"load",n),A(t,"loadeddata",n),A(t,"error",e)},O=function(t,n,e){!function(t){delete t.llTempImage}(t),function(t,n){n&&(n.loadingCount-=1)}(0,e),b(t,n.class_loading)},N=function(t,n,e){var a=h(t)||t,o=function o(r){!function(t,n,e,a){O(n,e,a),v(n,e.class_loaded),d(n,"loaded"),g(e.callback_loaded,n,a),L(e,a)}(0,t,n,e),z(a,o,i)},i=function i(r){!function(t,n,e,a){O(n,e,a),v(n,e.class_error),d(n,"error"),g(e.callback_error,n,a),L(e,a)}(0,t,n,e),z(a,o,i)};!function(t,n,e){C(t,"load",n),C(t,"loadeddata",n),C(t,"error",e)}(a,o,i)},M=function(t,n){n&&(n.toLoadCount-=1)},R=function(t,n,e){!function(t){t.llTempImage=document.createElement("img")}(t),N(t,n,e),function(t,n,e){var a=s(t,i?n.data_bg_hidpi:n.data_bg);a&&(t.style.backgroundImage='url("'.concat(a,'")'),h(t).setAttribute("src",a),p(e),v(t,n.class_loading),d(t,"loading"),g(n.callback_loading,t,e),g(n.callback_reveal,t,e))}(t,n,e),function(t,n,e){var a=s(t,i?n.data_bg_multi_hidpi:n.data_bg_multi);a&&(t.style.backgroundImage=a,v(t,n.class_applied),d(t,"applied"),g(n.callback_applied,t,e))}(t,n,e)},x=function(t,n,e){!function(t){return k.indexOf(t.tagName)>-1}(t)?R(t,n,e):function(t,n,e){N(t,n,e),I(t,n,e)}(t,n,e),M(0,e),function(t,n){if(n){var e=n._observer;e&&n._settings.auto_unobserve&&e.unobserve(t)}}(t,e),L(n,e)},T=function(t){var n=_(t);n&&(clearTimeout(n),f(t,null))},F=function(t,n,e){var a=e._settings;g(a.callback_enter,t,n,e),a.load_delay?function(t,n,e){var a=n.load_delay,o=_(t);o||(o=setTimeout((function(){x(t,n,e),T(t)}),a),f(t,o))}(t,a,e):x(t,a,e)},G=["IMG","IFRAME"],P=function(t){return t.use_native&&"loading"in HTMLImageElement.prototype},j=function(t,n,e){t.forEach((function(t){-1!==G.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),function(t,n,e){N(t,n,e),I(t,n,e),M(0,e),d(t,"native"),L(n,e)}(t,n,e))})),e.toLoadCount=0},D=function(t,n){!function(t){t.disconnect()}(t),function(t,n){n.forEach((function(n){t.observe(n),d(n,"observed")}))}(t,n)},S=function(t){var n;a&&!P(t._settings)&&(t._observer=new IntersectionObserver((function(n){n.forEach((function(n){return function(t){return t.isIntersecting||t.intersectionRatio>0}(n)?F(n.target,n,t):function(t,n,e){var a=e._settings;g(a.callback_exit,t,n,e),a.load_delay&&T(t)}(n.target,n,t)}))}),{root:(n=t._settings).container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}))},U=function(t){return Array.prototype.slice.call(t)},V=function(t){return t.container.querySelectorAll(t.elements_selector)},$=function(t){return!function(t){return null!==s(t,"ll-status")}(t)||function(t){return"observed"===s(t,"ll-status")}(t)},q=function(t){return function(t){return"error"===s(t,"ll-status")}(t)},H=function(t,n){return function(t){return U(t).filter($)}(t||V(n))},B=function(t){var n,e=t._settings;(n=V(e),U(n).filter(q)).forEach((function(t){b(t,e.class_error),function(t){u(t,"ll-status",null)}(t)})),t.update()},J=function(t,e){var a;this._settings=l(t),this.loadingCount=0,S(this),a=this,n&&window.addEventListener("online",(function(t){B(a)})),this.update(e)};return J.prototype={update:function(t){var n=this._settings,o=H(t,n);this.toLoadCount=o.length,!e&&a?P(n)?j(o,n,this):D(this._observer,o):this.loadAll(o)},destroy:function(){this._observer&&this._observer.disconnect(),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var n=this,e=this._settings;H(t,e).forEach((function(t){x(t,e,n)}))},load:function(t){x(t,this._settings,this)}},J.load=function(t,n){var e=l(n);x(t,e)},n&&function(t,n){if(n)if(n.length)for(var e,a=0;e=n[a];a+=1)c(t,e);else c(t,n)}(J,window.lazyLoadOptions),J}(); |
@@ -29,2 +29,3 @@ (function (global, factory) { | ||
| var supportsClassList = runningOnBrowser && "classList" in document.createElement("p"); | ||
| var isHiDpi = runningOnBrowser && window.devicePixelRatio > 1; | ||
@@ -40,3 +41,5 @@ var defaultSettings = { | ||
| data_bg: "bg", | ||
| data_bg_hidpi: "bg-hidpi", | ||
| data_bg_multi: "bg-multi", | ||
| data_bg_multi_hidpi: "bg-multi-hidpi", | ||
| data_poster: "poster", | ||
@@ -263,4 +266,3 @@ class_applied: "applied", | ||
| var setBackground = function setBackground(element, settings, instance) { | ||
| var srcDataValue = getData(element, settings.data_bg); // TODO: GET 2X WHEN DEVICEPIXELRATIO >= 1.5 | ||
| var srcDataValue = getData(element, isHiDpi ? settings.data_bg_hidpi : settings.data_bg); | ||
| if (!srcDataValue) return; | ||
@@ -280,4 +282,3 @@ element.style.backgroundImage = "url(\"".concat(srcDataValue, "\")"); | ||
| var setMultiBackground = function setMultiBackground(element, settings, instance) { | ||
| var bgDataValue = getData(element, settings.data_bg_multi); // TODO: GET 2X WHEN DEVICEPIXELRATIO >= 1.5 | ||
| var bgDataValue = getData(element, isHiDpi ? settings.data_bg_multi_hidpi : settings.data_bg_multi); | ||
| if (!bgDataValue) return; | ||
@@ -284,0 +285,0 @@ element.style.backgroundImage = bgDataValue; // Annotate and notify applied |
@@ -1,1 +0,1 @@ | ||
| !function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t=t||self).LazyLoad=n()}(this,(function(){"use strict";function t(){return(t=Object.assign||function(t){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o])}return t}).apply(this,arguments)}var n="undefined"!=typeof window,e=n&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),o=n&&"IntersectionObserver"in window,a=n&&"classList"in document.createElement("p"),i={elements_selector:"img",container:e||n?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_multi:"bg-multi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",load_delay:0,auto_unobserve:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,use_native:!1},r=function(n){return t({},i,n)},l=function(t,n){var e,o=new t(n);try{e=new CustomEvent("LazyLoad::Initialized",{detail:{instance:o}})}catch(t){(e=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:o})}window.dispatchEvent(e)},c=function(t,n){return t.getAttribute("data-"+n)},s=function(t,n,e){var o="data-"+n;null!==e?t.setAttribute(o,e):t.removeAttribute(o)},u=function(t,n){return s(t,"ll-status",n)},d=function(t,n){return s(t,"ll-timeout",n)},f=function(t){return c(t,"ll-timeout")},_=function(t,n,e,o){t&&(void 0===o?void 0===e?t(n):t(n,e):t(n,e,o))},g=function(t,n){a?t.classList.add(n):t.className+=(t.className?" ":"")+n},v=function(t,n){a?t.classList.remove(n):t.className=t.className.replace(new RegExp("(^|\\s+)"+n+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},p=function(t){return t.llTempImage},b=function(t){t&&(t.loadingCount+=1)},h=function(t){for(var n,e=[],o=0;n=t.children[o];o+=1)"SOURCE"===n.tagName&&e.push(n);return e},m=function(t,n,e){e&&t.setAttribute(n,e)},y=function(t,n){m(t,"sizes",c(t,n.data_sizes)),m(t,"srcset",c(t,n.data_srcset)),m(t,"src",c(t,n.data_src))},E={IMG:function(t,n){var e=t.parentNode;e&&"PICTURE"===e.tagName&&h(e).forEach((function(t){y(t,n)}));y(t,n)},IFRAME:function(t,n){m(t,"src",c(t,n.data_src))},VIDEO:function(t,n){h(t).forEach((function(t){m(t,"src",c(t,n.data_src))})),m(t,"poster",c(t,n.data_poster)),m(t,"src",c(t,n.data_src)),t.load()}},I=function(t,n,e){var o=E[t.tagName];o&&(o(t,n),b(e),g(t,n.class_loading),u(t,"loading"),_(n.callback_loading,t,e),_(n.callback_reveal,t,e))},k=["IMG","IFRAME","VIDEO"],L=function(t,n){!n||n.toLoadCount||n.loadingCount||_(t.callback_finish,n)},w=function(t,n,e){t.addEventListener(n,e)},C=function(t,n,e){t.removeEventListener(n,e)},A=function(t,n,e){C(t,"load",n),C(t,"loadeddata",n),C(t,"error",e)},z=function(t,n,e){!function(t){delete t.llTempImage}(t),function(t,n){n&&(n.loadingCount-=1)}(0,e),v(t,n.class_loading)},O=function(t,n,e){var o=p(t)||t,a=function a(r){!function(t,n,e,o){z(n,e,o),g(n,e.class_loaded),u(n,"loaded"),_(e.callback_loaded,n,o),L(e,o)}(0,t,n,e),A(o,a,i)},i=function i(r){!function(t,n,e,o){z(n,e,o),g(n,e.class_error),u(n,"error"),_(e.callback_error,n,o),L(e,o)}(0,t,n,e),A(o,a,i)};!function(t,n,e){w(t,"load",n),w(t,"loadeddata",n),w(t,"error",e)}(o,a,i)},N=function(t,n){n&&(n.toLoadCount-=1)},x=function(t,n,e){!function(t){t.llTempImage=document.createElement("img")}(t),O(t,n,e),function(t,n,e){var o=c(t,n.data_bg);o&&(t.style.backgroundImage='url("'.concat(o,'")'),p(t).setAttribute("src",o),b(e),g(t,n.class_loading),u(t,"loading"),_(n.callback_loading,t,e),_(n.callback_reveal,t,e))}(t,n,e),function(t,n,e){var o=c(t,n.data_bg_multi);o&&(t.style.backgroundImage=o,g(t,n.class_applied),u(t,"applied"),_(n.callback_applied,t,e))}(t,n,e)},M=function(t,n,e){!function(t){return k.indexOf(t.tagName)>-1}(t)?x(t,n,e):function(t,n,e){O(t,n,e),I(t,n,e)}(t,n,e),N(0,e),function(t,n){if(n){var e=n._observer;e&&n._settings.auto_unobserve&&e.unobserve(t)}}(t,e),L(n,e)},R=function(t){var n=f(t);n&&(clearTimeout(n),d(t,null))},T=function(t,n,e){var o=e._settings;_(o.callback_enter,t,n,e),o.load_delay?function(t,n,e){var o=n.load_delay,a=f(t);a||(a=setTimeout((function(){M(t,n,e),R(t)}),o),d(t,a))}(t,o,e):M(t,o,e)},j=["IMG","IFRAME"],F=function(t){return t.use_native&&"loading"in HTMLImageElement.prototype},G=function(t,n,e){t.forEach((function(t){-1!==j.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),function(t,n,e){O(t,n,e),I(t,n,e),N(0,e),u(t,"native"),L(n,e)}(t,n,e))})),e.toLoadCount=0},D=function(t,n){!function(t){t.disconnect()}(t),function(t,n){n.forEach((function(n){t.observe(n),u(n,"observed")}))}(t,n)},P=function(t){var n;o&&!F(t._settings)&&(t._observer=new IntersectionObserver((function(n){n.forEach((function(n){return function(t){return t.isIntersecting||t.intersectionRatio>0}(n)?T(n.target,n,t):function(t,n,e){var o=e._settings;_(o.callback_exit,t,n,e),o.load_delay&&R(t)}(n.target,n,t)}))}),{root:(n=t._settings).container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}))},S=function(t){return Array.prototype.slice.call(t)},U=function(t){return t.container.querySelectorAll(t.elements_selector)},V=function(t){return!function(t){return null!==c(t,"ll-status")}(t)||function(t){return"observed"===c(t,"ll-status")}(t)},$=function(t){return function(t){return"error"===c(t,"ll-status")}(t)},q=function(t,n){return function(t){return S(t).filter(V)}(t||U(n))},H=function(t){var n,e=t._settings;(n=U(e),S(n).filter($)).forEach((function(t){v(t,e.class_error),function(t){s(t,"ll-status",null)}(t)})),t.update()},B=function(t,e){var o;this._settings=r(t),this.loadingCount=0,P(this),o=this,n&&window.addEventListener("online",(function(t){H(o)})),this.update(e)};return B.prototype={update:function(t){var n=this._settings,a=q(t,n);this.toLoadCount=a.length,!e&&o?F(n)?G(a,n,this):D(this._observer,a):this.loadAll(a)},destroy:function(){this._observer&&this._observer.disconnect(),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var n=this,e=this._settings;q(t,e).forEach((function(t){M(t,e,n)}))},load:function(t){M(t,this._settings,this)}},B.load=function(t,n){var e=r(n);M(t,e)},n&&function(t,n){if(n)if(n.length)for(var e,o=0;e=n[o];o+=1)l(t,e);else l(t,n)}(B,window.lazyLoadOptions),B})); | ||
| !function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t=t||self).LazyLoad=n()}(this,(function(){"use strict";function t(){return(t=Object.assign||function(t){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&(t[a]=e[a])}return t}).apply(this,arguments)}var n="undefined"!=typeof window,e=n&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),a=n&&"IntersectionObserver"in window,o=n&&"classList"in document.createElement("p"),i=n&&window.devicePixelRatio>1,r={elements_selector:"img",container:e||n?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",load_delay:0,auto_unobserve:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,use_native:!1},l=function(n){return t({},r,n)},c=function(t,n){var e,a=new t(n);try{e=new CustomEvent("LazyLoad::Initialized",{detail:{instance:a}})}catch(t){(e=document.createEvent("CustomEvent")).initCustomEvent("LazyLoad::Initialized",!1,!1,{instance:a})}window.dispatchEvent(e)},s=function(t,n){return t.getAttribute("data-"+n)},u=function(t,n,e){var a="data-"+n;null!==e?t.setAttribute(a,e):t.removeAttribute(a)},d=function(t,n){return u(t,"ll-status",n)},f=function(t,n){return u(t,"ll-timeout",n)},_=function(t){return s(t,"ll-timeout")},g=function(t,n,e,a){t&&(void 0===a?void 0===e?t(n):t(n,e):t(n,e,a))},v=function(t,n){o?t.classList.add(n):t.className+=(t.className?" ":"")+n},p=function(t,n){o?t.classList.remove(n):t.className=t.className.replace(new RegExp("(^|\\s+)"+n+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},b=function(t){return t.llTempImage},h=function(t){t&&(t.loadingCount+=1)},m=function(t){for(var n,e=[],a=0;n=t.children[a];a+=1)"SOURCE"===n.tagName&&e.push(n);return e},y=function(t,n,e){e&&t.setAttribute(n,e)},E=function(t,n){y(t,"sizes",s(t,n.data_sizes)),y(t,"srcset",s(t,n.data_srcset)),y(t,"src",s(t,n.data_src))},w={IMG:function(t,n){var e=t.parentNode;e&&"PICTURE"===e.tagName&&m(e).forEach((function(t){E(t,n)}));E(t,n)},IFRAME:function(t,n){y(t,"src",s(t,n.data_src))},VIDEO:function(t,n){m(t).forEach((function(t){y(t,"src",s(t,n.data_src))})),y(t,"poster",s(t,n.data_poster)),y(t,"src",s(t,n.data_src)),t.load()}},I=function(t,n,e){var a=w[t.tagName];a&&(a(t,n),h(e),v(t,n.class_loading),d(t,"loading"),g(n.callback_loading,t,e),g(n.callback_reveal,t,e))},k=["IMG","IFRAME","VIDEO"],L=function(t,n){!n||n.toLoadCount||n.loadingCount||g(t.callback_finish,n)},C=function(t,n,e){t.addEventListener(n,e)},A=function(t,n,e){t.removeEventListener(n,e)},z=function(t,n,e){A(t,"load",n),A(t,"loadeddata",n),A(t,"error",e)},O=function(t,n,e){!function(t){delete t.llTempImage}(t),function(t,n){n&&(n.loadingCount-=1)}(0,e),p(t,n.class_loading)},N=function(t,n,e){var a=b(t)||t,o=function o(r){!function(t,n,e,a){O(n,e,a),v(n,e.class_loaded),d(n,"loaded"),g(e.callback_loaded,n,a),L(e,a)}(0,t,n,e),z(a,o,i)},i=function i(r){!function(t,n,e,a){O(n,e,a),v(n,e.class_error),d(n,"error"),g(e.callback_error,n,a),L(e,a)}(0,t,n,e),z(a,o,i)};!function(t,n,e){C(t,"load",n),C(t,"loadeddata",n),C(t,"error",e)}(a,o,i)},x=function(t,n){n&&(n.toLoadCount-=1)},M=function(t,n,e){!function(t){t.llTempImage=document.createElement("img")}(t),N(t,n,e),function(t,n,e){var a=s(t,i?n.data_bg_hidpi:n.data_bg);a&&(t.style.backgroundImage='url("'.concat(a,'")'),b(t).setAttribute("src",a),h(e),v(t,n.class_loading),d(t,"loading"),g(n.callback_loading,t,e),g(n.callback_reveal,t,e))}(t,n,e),function(t,n,e){var a=s(t,i?n.data_bg_multi_hidpi:n.data_bg_multi);a&&(t.style.backgroundImage=a,v(t,n.class_applied),d(t,"applied"),g(n.callback_applied,t,e))}(t,n,e)},R=function(t,n,e){!function(t){return k.indexOf(t.tagName)>-1}(t)?M(t,n,e):function(t,n,e){N(t,n,e),I(t,n,e)}(t,n,e),x(0,e),function(t,n){if(n){var e=n._observer;e&&n._settings.auto_unobserve&&e.unobserve(t)}}(t,e),L(n,e)},T=function(t){var n=_(t);n&&(clearTimeout(n),f(t,null))},j=function(t,n,e){var a=e._settings;g(a.callback_enter,t,n,e),a.load_delay?function(t,n,e){var a=n.load_delay,o=_(t);o||(o=setTimeout((function(){R(t,n,e),T(t)}),a),f(t,o))}(t,a,e):R(t,a,e)},F=["IMG","IFRAME"],G=function(t){return t.use_native&&"loading"in HTMLImageElement.prototype},P=function(t,n,e){t.forEach((function(t){-1!==F.indexOf(t.tagName)&&(t.setAttribute("loading","lazy"),function(t,n,e){N(t,n,e),I(t,n,e),x(0,e),d(t,"native"),L(n,e)}(t,n,e))})),e.toLoadCount=0},D=function(t,n){!function(t){t.disconnect()}(t),function(t,n){n.forEach((function(n){t.observe(n),d(n,"observed")}))}(t,n)},S=function(t){var n;a&&!G(t._settings)&&(t._observer=new IntersectionObserver((function(n){n.forEach((function(n){return function(t){return t.isIntersecting||t.intersectionRatio>0}(n)?j(n.target,n,t):function(t,n,e){var a=e._settings;g(a.callback_exit,t,n,e),a.load_delay&&T(t)}(n.target,n,t)}))}),{root:(n=t._settings).container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}))},U=function(t){return Array.prototype.slice.call(t)},V=function(t){return t.container.querySelectorAll(t.elements_selector)},$=function(t){return!function(t){return null!==s(t,"ll-status")}(t)||function(t){return"observed"===s(t,"ll-status")}(t)},q=function(t){return function(t){return"error"===s(t,"ll-status")}(t)},H=function(t,n){return function(t){return U(t).filter($)}(t||V(n))},B=function(t){var n,e=t._settings;(n=V(e),U(n).filter(q)).forEach((function(t){p(t,e.class_error),function(t){u(t,"ll-status",null)}(t)})),t.update()},J=function(t,e){var a;this._settings=l(t),this.loadingCount=0,S(this),a=this,n&&window.addEventListener("online",(function(t){B(a)})),this.update(e)};return J.prototype={update:function(t){var n=this._settings,o=H(t,n);this.toLoadCount=o.length,!e&&a?G(n)?P(o,n,this):D(this._observer,o):this.loadAll(o)},destroy:function(){this._observer&&this._observer.disconnect(),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var n=this,e=this._settings;H(t,e).forEach((function(t){R(t,e,n)}))},load:function(t){R(t,this._settings,this)}},J.load=function(t,n){var e=l(n);R(t,e)},n&&function(t,n){if(n)if(n.length)for(var e,a=0;e=n[a];a+=1)c(t,e);else c(t,n)}(J,window.lazyLoadOptions),J})); |
| { | ||
| "name": "vanilla-lazyload", | ||
| "version": "15.0.0", | ||
| "version": "15.1.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", |
@@ -82,2 +82,8 @@ LazyLoad is a fast, lightweight and flexible script that **speeds up your web application** by loading your content images, videos and iframes only **as they enter the viewport**. It's written in plain "vanilla" JavaScript, it leverages the [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) API, it works with [responsive images](https://alistapart.com/article/responsive-images-in-practice) and it supports native lazy loading. See [notable features](#-notable-features) for more. | ||
| Single background, HiDPI screen support | ||
| ```html | ||
| <div class="lazy" data-bg="lazy.jpg" data-bg-hidpi="lazy@2x.jpg"></div> | ||
| ``` | ||
| Multiple backgrounds | ||
@@ -94,6 +100,18 @@ | ||
| Multiple backgrounds, HiDPI screen support | ||
| ```html | ||
| <div | ||
| class="lazy" | ||
| data-bg-multi="url(lazy-head.jpg), url(lazy-body.jpg), linear-gradient(#fff, #ccc)" | ||
| data-bg-multi-hidpi="url(lazy-head@2x.jpg), url(lazy-body@2x.jpg), linear-gradient(#fff, #ccc)" | ||
| > | ||
| ... | ||
| </div> | ||
| ``` | ||
| Notes: | ||
| - you need to use `url()` in the values of your `data-bg-multi` attribute | ||
| - ⚠ you shouldn't use background images to load content images, they're bad for SEO and for accessibility | ||
| - you need to use `url()` in the values of your `data-bg-multi` and `data-bg-multi-hidpi` attributes | ||
@@ -120,3 +138,3 @@ #### Lazy video | ||
| The latest, recommended version of LazyLoad is **15.0.0**. | ||
| The latest, recommended version of LazyLoad is **15.1.0**. | ||
@@ -138,3 +156,3 @@ Quickly understand how to upgrade from a previous version reading the [practical upgrade guide](UPGRADE.md). | ||
| ```html | ||
| <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@15.0.0/dist/lazyload.min.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@15.1.0/dist/lazyload.min.js"></script> | ||
| ``` | ||
@@ -146,3 +164,3 @@ | ||
| <script src="https://cdn.jsdelivr.net/npm/intersection-observer@0.7.0/intersection-observer.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@15.0.0/dist/lazyload.min.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@15.1.0/dist/lazyload.min.js"></script> | ||
| ``` | ||
@@ -180,3 +198,3 @@ | ||
| ```js | ||
| var lazyLoadAmdUrl = "https://cdn.jsdelivr.net/npm/vanilla-lazyload@15.0.0/dist/lazyload.amd.min.js"; | ||
| var lazyLoadAmdUrl = "https://cdn.jsdelivr.net/npm/vanilla-lazyload@15.1.0/dist/lazyload.amd.min.js"; | ||
| var polyfillAmdUrl = "https://cdn.jsdelivr.net/npm/intersection-observer-amd@2.0.1/intersection-observer-amd.js"; | ||
@@ -227,3 +245,3 @@ | ||
| async | ||
| src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@15.0.0/dist/lazyload.min.js" | ||
| src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@15.1.0/dist/lazyload.min.js" | ||
| ></script> | ||
@@ -261,3 +279,3 @@ ``` | ||
| async | ||
| src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@15.0.0/dist/lazyload.min.js" | ||
| src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@15.1.0/dist/lazyload.min.js" | ||
| ></script> | ||
@@ -631,29 +649,31 @@ ``` | ||
| | Name | Meaning | Default value | Example value | | ||
| | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- | ---------------------------------------- | | ||
| | `container` | The scrolling container of the elements in the `elements_selector` option. | `document` | `document.querySelector('.scrollPanel')` | | ||
| | `elements_selector` | The CSS selector of the elements to load lazily, which will be selected as descendants of the `container` object. | `"img"` | `".images img.lazy"` | | ||
| | `threshold` | A number of pixels representing the outer distance off 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. | `null` | `"500px 10%"` | | ||
| | `data_src` | The name of the data attribute containing the element source to load, excluding the `"data-"` part. E.g. if your data attribute is named `"data-src"`, just pass `"src"` | `"src"` | `"lazy-src"` | | ||
| | `data_srcset` | The name of the data attribute containing the image source set to load, in either `img` and `source` tags, excluding the `"data-"` part. E.g. if your data attribute is named `"data-srcset"`, just pass `"srcset"` | `"srcset"` | `"lazy-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"` | `"lazy-sizes"` | | ||
| | `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"` | `"lazy-bg"` | | ||
| | `data_bg_multi` | The name of the data attribute containing the value of multiple `background-image` to load lazily, excluding the `"data-"` part. E.g. if your data attribute is named `"data-bg-multi"`, just pass `"bg-multi"`. The attribute value must be a valid value for `background-image`, including the `url()` part of the CSS instruction. | `"bg-multi"` | `"lazy-bg-multi"` | | ||
| | `data_poster` | The name of the data attribute containing the value of `poster` to load lazily, excluding the `"data-"` part. E.g. if your data attribute is named `"data-poster"`, just pass `"poster"`. | `"poster"` | `"lazy-poster"` | | ||
| | `class_applied` | The class applied to the multiple background elements after the multiple background was applied | `"applied"` | `"lazy-applied"` | | ||
| | `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"` | | ||
| | `load_delay` | The time (in milliseconds) each image needs to stay inside the viewport before its loading begins. | `0` | `300` | | ||
| | `auto_unobserve` | A boolean that defines whether or not to automatically unobserve elements that was already revealed | `true` | `false` | | ||
| | `callback_enter` | A callback function which is called whenever an element enters the viewport. Arguments: DOM element, intersection observer entry, lazyload instance. | `null` | `(el)=>{console.log("Entered", el)}` | | ||
| | `callback_exit` | A callback function which is called whenever an element exits the viewport. Arguments: DOM element, intersection observer entry, lazyload instance. | `null` | `(el)=>{console.log("Exited", el)}` | | ||
| | `callback_applied` | A callback function which is called whenever a multiple background element starts loading. Arguments: DOM element, lazyload instance. | `null` | `(el)=>{console.log("Applied", el)}` | | ||
| | `callback_loading` | A callback function which is called whenever an element starts loading. Arguments: DOM element, lazyload instance. | `null` | `(el)=>{console.log("Loading", el)}` | | ||
| | `callback_reveal` | **⚠ DEPRECATED: use `callback_loading` instead.** A callback function which is called whenever an element starts loading. Arguments: DOM element, lazyload instance. | `null` | `(el)=>{console.log("Loading", el)}` | | ||
| | `callback_loaded` | A callback function which is called whenever an element finishes loading. Note that, in version older than 11.0.0, this option went under the name `callback_load`. Arguments: DOM element, lazyload instance. | `null` | `(el)=>{console.log("Loaded", el)}` | | ||
| | `callback_error` | A callback function which is called whenever an element triggers an error. Arguments: DOM element, lazyload instance. | `null` | `(el)=>{console.log("Error", el)}` | | ||
| | `callback_finish` | A callback function which is called when there are no more elements to load _and_ all elements have been downloaded. Arguments: lazyload instance. | `null` | `()=>{console.log("Finish")}` | | ||
| | `use_native` | This boolean sets whether or not to use [native lazy loading](https://addyosmani.com/blog/lazy-loading/). On browsers that supports it, LazyLoad will set the `loading="lazy"` attribute on images and iframes, and delegate their loading to the browser. | `false` | `true` | | ||
| | Name | Meaning | Default value | Example value | | ||
| | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------ | ---------------------------------------- | | ||
| | `container` | The scrolling container of the elements in the `elements_selector` option. | `document` | `document.querySelector('.scrollPanel')` | | ||
| | `elements_selector` | The CSS selector of the elements to load lazily, which will be selected as descendants of the `container` object. | `"img"` | `".images img.lazy"` | | ||
| | `threshold` | A number of pixels representing the outer distance off 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. | `null` | `"500px 10%"` | | ||
| | `data_src` | The name of the data attribute containing the element URL to load, excluding the `"data-"` part. E.g. if your data attribute is named `"data-src"`, just pass `"src"` | `"src"` | `"lazy-src"` | | ||
| | `data_srcset` | The name of the data attribute containing the image URL set to load, in either `img` and `source` tags, excluding the `"data-"` part. E.g. if your data attribute is named `"data-srcset"`, just pass `"srcset"` | `"srcset"` | `"lazy-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"` | `"lazy-sizes"` | | ||
| | `data_bg` | The name of the data attribute containing the URL 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"` | `"lazy-bg"` | | ||
| | `data_bg_hidpi` | The name of the data attribute containing the URL of `background-image` to load lazily on HiDPI screens, excluding the `"data-"` part. E.g. if your data attribute is named `"data-bg-hidpi"`, just pass `"bg-hidpi"`. The attribute value must be a valid value for `background-image`, including the `url()` part of the CSS instruction. | `"bg-hidpi"` | `"lazy-bg-hidpi"` | | ||
| | `data_bg_multi` | The name of the data attribute containing the value of multiple `background-image` to load lazily, excluding the `"data-"` part. E.g. if your data attribute is named `"data-bg-multi"`, just pass `"bg-multi"`. The attribute value must be a valid value for `background-image`, including the `url()` part of the CSS instruction. | `"bg-multi"` | `"lazy-bg-multi"` | | ||
| | `data_bg_multi_hidpi` | The name of the data attribute containing the value of multiple `background-image` to load lazily on HiDPI screens, excluding the `"data-"` part. E.g. if your data attribute is named `"data-bg-multi-hidpi"`, just pass `"bg-multi-hidpi"`. The attribute value must be a valid value for `background-image`, including the `url()` part of the CSS instruction. | `"bg-multi-hidpi"` | `"lazy-bg-multi-hidpi"` | | ||
| | `data_poster` | The name of the data attribute containing the value of `poster` to load lazily, excluding the `"data-"` part. E.g. if your data attribute is named `"data-poster"`, just pass `"poster"`. | `"poster"` | `"lazy-poster"` | | ||
| | `class_applied` | The class applied to the multiple background elements after the multiple background was applied | `"applied"` | `"lazy-applied"` | | ||
| | `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"` | | ||
| | `load_delay` | The time (in milliseconds) each image needs to stay inside the viewport before its loading begins. | `0` | `300` | | ||
| | `auto_unobserve` | A boolean that defines whether or not to automatically unobserve elements that was already revealed | `true` | `false` | | ||
| | `callback_enter` | A callback function which is called whenever an element enters the viewport. Arguments: DOM element, intersection observer entry, lazyload instance. | `null` | `(el)=>{console.log("Entered", el)}` | | ||
| | `callback_exit` | A callback function which is called whenever an element exits the viewport. Arguments: DOM element, intersection observer entry, lazyload instance. | `null` | `(el)=>{console.log("Exited", el)}` | | ||
| | `callback_applied` | A callback function which is called whenever a multiple background element starts loading. Arguments: DOM element, lazyload instance. | `null` | `(el)=>{console.log("Applied", el)}` | | ||
| | `callback_loading` | A callback function which is called whenever an element starts loading. Arguments: DOM element, lazyload instance. | `null` | `(el)=>{console.log("Loading", el)}` | | ||
| | `callback_reveal` | **⚠ DEPRECATED: use `callback_loading` instead.** A callback function which is called whenever an element starts loading. Arguments: DOM element, lazyload instance. | `null` | `(el)=>{console.log("Loading", el)}` | | ||
| | `callback_loaded` | A callback function which is called whenever an element finishes loading. Note that, in version older than 11.0.0, this option went under the name `callback_load`. Arguments: DOM element, lazyload instance. | `null` | `(el)=>{console.log("Loaded", el)}` | | ||
| | `callback_error` | A callback function which is called whenever an element triggers an error. Arguments: DOM element, lazyload instance. | `null` | `(el)=>{console.log("Error", el)}` | | ||
| | `callback_finish` | A callback function which is called when there are no more elements to load _and_ all elements have been downloaded. Arguments: lazyload instance. | `null` | `()=>{console.log("Finish")}` | | ||
| | `use_native` | This boolean sets whether or not to use [native lazy loading](https://addyosmani.com/blog/lazy-loading/). On browsers that supports it, LazyLoad will set the `loading="lazy"` attribute on images and iframes, and delegate their loading to the browser. | `false` | `true` | | ||
@@ -660,0 +680,0 @@ ### Methods |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by1.7%
181779
- Lines of code
- increased by0.64%
2195
- Number of lines in readme file
- increased by2.82%
730
No dependency changes