diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..2feea88 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,7 @@ +{ + "editor.codeActionsOnSave": { + "source.fixAll.eslint": true + }, + "editor.tabSize": 4, + "editor.defaultFormatter": "esbenp.prettier-vscode" +} \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index cc93121..3791e95 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,13 +2,18 @@ ## Version 17 + +#### 17.6.0 + +- Added ability to lazily load the `` tag, as requested in #177. Useful to lazily load animated SVGs. + #### 17.5.1 - Updated Typescript typings #### 17.5.0 -- Added the ability to restore DOM to its original state throught the `restoreAll()` method. +- Added the ability to restore DOM to its original state through the `restoreAll()` method. - Destroy demo became [restore and destroy demo](demos/restore_destroy.html) #### 17.4.0 diff --git a/README.md b/README.md index 31ce7b4..8a6fa23 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -LazyLoad is a lightweight (2.4 kB) and flexible script that **speeds up your web application** by deferring the loading of your below-the-fold images, videos and iframes to **when they will 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 supports [responsive images](https://alistapart.com/article/responsive-images-in-practice), it optimizes your website for slower connections, and can enable native lazy loading. See [all features](#-all-features-compared) for more. +LazyLoad is a lightweight (2.4 kB) and flexible script that **speeds up your web application** by deferring the loading of your below-the-fold images, animated SVGs, videos and iframes to **when they will 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 supports [responsive images](https://alistapart.com/article/responsive-images-in-practice), it optimizes your website for slower connections, and can enable native lazy loading. See [all features](#-all-features-compared) for more. [![vanilla-lazyload (latest)](https://img.shields.io/npm/v/vanilla-lazyload/latest.svg)](https://www.npmjs.com/package/vanilla-lazyload) [![vanilla-lazyload (downloads)](https://img.shields.io/npm/dy/vanilla-lazyload.svg)](https://www.npmjs.com/package/vanilla-lazyload) @@ -127,6 +127,12 @@ Multiple backgrounds, HiDPI screen support: ℹ Please note that you must use `url()` to wrap the URLs in your `data-bg-multi-hidpi` attributes. +#### Lazy animated SVG + +```html + +``` + #### Lazy video ```html @@ -142,7 +148,7 @@ Please note that the video poster can be lazily loaded too. #### Lazy iframe ```html - + ``` --- @@ -153,7 +159,7 @@ Please note that the video poster can be lazily loaded too. ## 👩‍💻 Getting started - Script -The latest, recommended version of LazyLoad is **17.5.1**. +The latest, recommended version of LazyLoad is **17.6.0**. Quickly understand how to upgrade from a previous version reading the [practical upgrade guide](UPGRADE.md). @@ -162,7 +168,7 @@ Quickly understand how to upgrade from a previous version reading the [practical The easiest way to use LazyLoad is to include the script from a CDN: ```html - + ``` Then, in your javascript code: @@ -203,7 +209,7 @@ Then include the script. ```html ``` @@ -237,7 +243,7 @@ Then include the script. ```html ``` @@ -371,6 +377,7 @@ HTML A lazy image +
``` @@ -585,6 +592,8 @@ The [demos](https://github.com/verlok/vanilla-lazyload/tree/master/demos) folder | Content | Lazy video with multiple `` tags, different preload options, NO autoplay | [Code](demos/video.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/video.html) | | Content | Lazy video with multiple `` tags, different preload options, WITH autoplay | [Code](demos/video_autoplay.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/video_autoplay.html) | | Content | Lazy loading background images | [Code](demos/background_images.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/background_images.html) | +| Content | Lazy loading iframes | [Code](demos/iframes.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/iframes.html) | +| Content | Lazy loading animated SVGs and PDF files | [Code](demos/objects.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/objects.html) | | Content | Lazy loading multiple background images | [Code](demos/background_images_multi.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/background_images_multi.html) | | Content | Lazy WebP images with the `` tag and the `type` attribute for WebP | [Code](demos/picture_type_webp.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/picture_type_webp.html) | | Loading | Asynchronous loading LazyLoad with requireJS | [Code](demos/amd.html) | [Live](https://www.andreaverlicchi.eu/vanilla-lazyload/demos/amd.html) | @@ -688,7 +697,7 @@ Here's the list of the options. | `class_error` | The class applied to the elements when the element causes an error. | `"error"` | `"lazy-error"` | | `class_entered` | The class applied to the elements after they entered the viewport. | `"entered"` | `"lazy-entered"` | | `class_exited` | The class applied to the elements after they exited the viewport. This class is removed if an element enters the viewport again. The `unobserve_entered` option can affect the appliance of this class, e.g. when loading images that complete loading before exiting. | `"exited"` | `"lazy-exited"` | -| `cancel_on_exit` | A boolean that defines whether or not to cancel the download of the images that exit the viewport while they are still loading, eventually restoring the original attributes. It applies only to images so to the `img` (and `picture`) tags, so it doesn't apply to background images, `iframe`s nor `video`s. | `true` | `false` | +| `cancel_on_exit` | A boolean that defines whether or not to cancel the download of the images that exit the viewport while they are still loading, eventually restoring the original attributes. It applies only to images so to the `img` (and `picture`) tags, so it doesn't apply to background images, `iframe`s, `object`s nor `video`s. | `true` | `false` | | `unobserve_entered` | A boolean that defines whether or not to automatically unobserve elements once they entered the viewport | `false` | `true` | | `unobserve_completed` | A boolean that defines whether or not to automatically unobserve elements once they've loaded or throwed an error | `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)}` | @@ -756,6 +765,7 @@ A list of all vanilla-lazyload features, compared with other popular lazy loadin | Can lazyload responsive images | ✔ | ✔ | | ...and automatically calculate the value of the `sizes` attribute | | ✔ | | Can lazyload iframes | ✔ | ✔ | +| Can lazyload animated SVGs | ✔ | | | Can lazyload videos | ✔ | | | Can lazyload background images | ✔ | | | Can lazily execute code, when given elements enter the viewport | ✔ | | @@ -800,6 +810,10 @@ vanilla-lazyload doesn't have this feature because of performance optimization r Both scripts can lazyload the `iframe` tag. +#### Can lazyload animated SVGs + +Only vanilla-lazyload can load animated SVGs via the `object` tag. + #### Can lazyload videos Only vanilla-lazyload can lazyload the `video` tag, even with multiple `source`s. diff --git a/demos/object.html b/demos/object.html new file mode 100644 index 0000000..b5b1254 --- /dev/null +++ b/demos/object.html @@ -0,0 +1,99 @@ + + + + + + Lazy object - Lazyload demos + + + + + + +

Lazy objects demo

+
+

Scroll down to see lazily loaded objects

+

Scroll down to see lazily loaded objects

+

Scroll down to see lazily loaded objects

+

Scroll down to see lazily loaded objects

+

Scroll down to see lazily loaded objects

+

Scroll down to see lazily loaded objects

+

Scroll down to see lazily loaded objects

+

Scroll down to see lazily loaded objects

+

Scroll down to see lazily loaded objects

+

Scroll down to see lazily loaded objects

+

Scroll down to see lazily loaded objects

+

Scroll down to see lazily loaded objects

+

Scroll down to see lazily loaded objects

+

Scroll down to see lazily loaded objects

+

Scroll down to see lazily loaded objects

+

Scroll down to see lazily loaded objects

+

Scroll down to see lazily loaded objects

+

Scroll down to see lazily loaded objects

+

Scroll down to see lazily loaded objects

+

Scroll down to see lazily loaded objects

+

Scroll down to see lazily loaded objects

+

Scroll down to see lazily loaded objects

+

Scroll down to see lazily loaded objects

+

Scroll down to see lazily loaded objects

+

Scroll down to see lazily loaded objects

+

Scroll down to see lazily loaded objects

+

Scroll down to see lazily loaded objects

+

Scroll down to see lazily loaded objects

+

Scroll down to see lazily loaded objects

+

Scroll down to see lazily loaded objects

+ + +
+ + + + diff --git a/demos/objects/pdf01.pdf b/demos/objects/pdf01.pdf new file mode 100644 index 0000000..c0e31a0 Binary files /dev/null and b/demos/objects/pdf01.pdf differ diff --git a/demos/objects/svg01.svg b/demos/objects/svg01.svg new file mode 100644 index 0000000..85d65ea --- /dev/null +++ b/demos/objects/svg01.svg @@ -0,0 +1 @@ +FoldersDashboardDrawingsBenefits404Cell FormulasLast modified: 17 Aug 2017Last modified: 17 Aug 2017DashboardTeams (2)RadicaVectaTrashIntegrationsAdd to Slackvecta.ioBETACreateMembers \ No newline at end of file diff --git a/dist/lazyload.amd.js b/dist/lazyload.amd.js index 02fcf2a..4feb930 100644 --- a/dist/lazyload.amd.js +++ b/dist/lazyload.amd.js @@ -108,6 +108,7 @@ define(function () { 'use strict'; var SIZES = "sizes"; var POSTER = "poster"; var ORIGINALS = "llOriginalAttrs"; + var DATA = "data"; var statusLoading = "loading"; var statusLoaded = "loaded"; @@ -264,6 +265,7 @@ define(function () { 'use strict'; var attrsSrc = [SRC]; var attrsSrcPoster = [SRC, POSTER]; var attrsSrcSrcsetSizes = [SRC, SRCSET, SIZES]; + var attrsData = [DATA]; var hasOriginalAttrs = function hasOriginalAttrs(element) { return !!element[ORIGINALS]; }; @@ -275,6 +277,8 @@ define(function () { 'use strict'; }; // ## SAVE ## var setOriginalsObject = function setOriginalsObject(element, attributes) { + debugger; + if (hasOriginalAttrs(element)) { return; } @@ -378,6 +382,10 @@ define(function () { 'use strict'; setAttributeIfValue(videoEl, SRC, getData(videoEl, settings.data_src)); videoEl.load(); }; + var setSourcesObject = function setSourcesObject(object, settings) { + setOriginalsObject(object, attrsData); + setAttributeIfValue(object, DATA, getData(object, settings.data_src)); + }; var setBackground = function setBackground(element, settings, instance) { var bg1xValue = getData(element, settings.data_bg); var bgHiDpiValue = getData(element, settings.data_bg_hidpi); @@ -405,7 +413,8 @@ define(function () { 'use strict'; var setSourcesFunctions = { IMG: setSourcesImg, IFRAME: setSourcesIframe, - VIDEO: setSourcesVideo + VIDEO: setSourcesVideo, + OBJECT: setSourcesObject }; var setSourcesNative = function setSourcesNative(element, settings) { var setSourcesFunction = setSourcesFunctions[element.tagName]; @@ -427,7 +436,7 @@ define(function () { 'use strict'; manageLoading(element, settings, instance); }; - var elementsWithLoadEvent = ["IMG", "IFRAME", "VIDEO"]; + var elementsWithLoadEvent = ["IMG", "IFRAME", "VIDEO", "OBJECT"]; var hasLoadEvent = function hasLoadEvent(element) { return elementsWithLoadEvent.indexOf(element.tagName) > -1; }; @@ -569,10 +578,14 @@ define(function () { 'use strict'; var restoreIframe = function restoreIframe(iframeEl) { restoreOriginalAttrs(iframeEl, attrsSrc); }; + var restoreObject = function restoreObject(objectEl) { + restoreOriginalAttrs(objectEl, attrsData); + }; var restoreFunctions = { IMG: restoreImg, IFRAME: restoreIframe, - VIDEO: restoreVideo + VIDEO: restoreVideo, + OBJECT: restoreObject }; var restoreAttributes = function restoreAttributes(element) { diff --git a/dist/lazyload.amd.min.js b/dist/lazyload.amd.min.js index 69d036e..343e213 100644 --- a/dist/lazyload.amd.min.js +++ b/dist/lazyload.amd.min.js @@ -1 +1 @@ -define((function(){"use strict";function n(){return n=Object.assign||function(n){for(var t=1;t1,r={elements_selector:".lazy",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",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},c=function(t){return n({},r,t)},u=function(n,t){var e,i="LazyLoad::Initialized",o=new n(t);try{e=new CustomEvent(i,{detail:{instance:o}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:o})}window.dispatchEvent(e)},l="src",s="srcset",f="sizes",d="poster",_="llOriginalAttrs",g="loading",v="loaded",b="applied",p="error",h="native",m="data-",E="ll-status",I=function(n,t){return n.getAttribute(m+t)},A=function(n){return I(n,E)},k=function(n,t){return function(n,t,e){var i="data-ll-status";null!==e?n.setAttribute(i,e):n.removeAttribute(i)}(n,0,t)},w=function(n){return k(n,null)},y=function(n){return null===A(n)},L=function(n){return A(n)===h},O=[g,v,b,p],x=function(n,t,e,i){n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},N=function(n,t){o?n.classList.add(t):n.className+=(n.className?" ":"")+t},C=function(n,t){o?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},M=function(n){return n.llTempImage},z=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},R=function(n,t){n&&(n.loadingCount+=t)},G=function(n,t){n&&(n.toLoadCount=t)},D=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},T=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&D(e).forEach(t)},V=function(n,t){D(n).forEach(t)},F=[l],P=[l,d],S=[l,s,f],j=function(n){return!!n[_]},U=function(n){return n[_]},$=function(n){return delete n[_]},q=function(n,t){if(!j(n)){var e={};t.forEach((function(t){e[t]=n.getAttribute(t)})),n[_]=e}},H=function(n,t){if(j(n)){var e=U(n);t.forEach((function(t){!function(n,t,e){e?n.setAttribute(t,e):n.removeAttribute(t)}(n,t,e[t])}))}},B=function(n,t,e){N(n,t.class_loading),k(n,g),e&&(R(e,1),x(t.callback_loading,n,e))},J=function(n,t,e){e&&n.setAttribute(t,e)},K=function(n,t){J(n,f,I(n,t.data_sizes)),J(n,s,I(n,t.data_srcset)),J(n,l,I(n,t.data_src))},Q={IMG:function(n,t){T(n,(function(n){q(n,S),K(n,t)})),q(n,S),K(n,t)},IFRAME:function(n,t){q(n,F),J(n,l,I(n,t.data_src))},VIDEO:function(n,t){V(n,(function(n){q(n,F),J(n,l,I(n,t.data_src))})),q(n,P),J(n,d,I(n,t.data_poster)),J(n,l,I(n,t.data_src)),n.load()}},W=["IMG","IFRAME","VIDEO"],X=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||x(n.callback_finish,t)},Y=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},Z=function(n,t,e){n.removeEventListener(t,e)},nn=function(n){return!!n.llEvLisnrs},tn=function(n){if(nn(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];Z(n,e,i)}delete n.llEvLisnrs}},en=function(n,t,e){!function(n){delete n.llTempImage}(n),R(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),C(n,t.class_loading),t.unobserve_completed&&z(n,e)},on=function(n,t,e){var i=M(n)||n;nn(i)||function(n,t,e){nn(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";Y(n,i,t),Y(n,"error",e)}(i,(function(o){!function(n,t,e,i){var o=L(t);en(t,e,i),N(t,e.class_loaded),k(t,v),x(e.callback_loaded,t,i),o||X(e,i)}(0,n,t,e),tn(i)}),(function(o){!function(n,t,e,i){var o=L(t);en(t,e,i),N(t,e.class_error),k(t,p),x(e.callback_error,t,i),o||X(e,i)}(0,n,t,e),tn(i)}))},an=function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),on(n,t,e),function(n){j(n)||(n[_]={backgroundImage:n.style.backgroundImage})}(n),function(n,t,e){var i=I(n,t.data_bg),o=I(n,t.data_bg_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage='url("'.concat(r,'")'),M(n).setAttribute(l,r),B(n,t,e))}(n,t,e),function(n,t,e){var i=I(n,t.data_bg_multi),o=I(n,t.data_bg_multi_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage=r,function(n,t,e){N(n,t.class_applied),k(n,b),e&&(t.unobserve_completed&&z(n,t),x(t.callback_applied,n,e))}(n,t,e))}(n,t,e)},rn=function(n,t,e){!function(n){return W.indexOf(n.tagName)>-1}(n)?an(n,t,e):function(n,t,e){on(n,t,e),function(n,t,e){var i=Q[n.tagName];i&&(i(n,t),B(n,t,e))}(n,t,e)}(n,t,e)},cn=function(n){n.removeAttribute(l),n.removeAttribute(s),n.removeAttribute(f)},un=function(n){T(n,(function(n){H(n,S)})),H(n,S)},ln={IMG:un,IFRAME:function(n){H(n,F)},VIDEO:function(n){V(n,(function(n){H(n,F)})),H(n,P),n.load()}},sn=function(n,t){(function(n){var t=ln[n.tagName];t?t(n):function(n){if(j(n)){var t=U(n);n.style.backgroundImage=t.backgroundImage}}(n)})(n),function(n,t){y(n)||L(n)||(C(n,t.class_entered),C(n,t.class_exited),C(n,t.class_applied),C(n,t.class_loading),C(n,t.class_loaded),C(n,t.class_error))}(n,t),w(n),$(n)},fn=["IMG","IFRAME","VIDEO"],dn=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},_n=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){var o=function(n){return O.indexOf(A(n))>=0}(n);k(n,"entered"),N(n,e.class_entered),C(n,e.class_exited),function(n,t,e){t.unobserve_entered&&z(n,e)}(n,e,i),x(e.callback_enter,n,t,i),o||rn(n,e,i)}(n.target,n,t,e):function(n,t,e,i){y(n)||(N(n,e.class_exited),function(n,t,e,i){e.cancel_on_exit&&function(n){return A(n)===g}(n)&&"IMG"===n.tagName&&(tn(n),function(n){T(n,(function(n){cn(n)})),cn(n)}(n),un(n),C(n,e.class_loading),R(i,-1),w(n),x(e.callback_cancel,n,t,i))}(n,t,e,i),x(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},gn=function(n){return Array.prototype.slice.call(n)},vn=function(n){return n.container.querySelectorAll(n.elements_selector)},bn=function(n){return function(n){return A(n)===p}(n)},pn=function(n,t){return function(n){return gn(n).filter(y)}(n||vn(t))},hn=function(n,e){var o=c(n);this._settings=o,this.loadingCount=0,function(n,t){i&&!dn(n)&&(t._observer=new IntersectionObserver((function(e){_n(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(o,this),function(n,e){t&&window.addEventListener("online",(function(){!function(n,t){var e;(e=vn(n),gn(e).filter(bn)).forEach((function(t){C(t,n.class_error),w(t)})),t.update()}(n,e)}))}(o,this),this.update(e)};return hn.prototype={update:function(n){var t,o,a=this._settings,r=pn(n,a);G(this,r.length),!e&&i?dn(a)?function(n,t,e){n.forEach((function(n){-1!==fn.indexOf(n.tagName)&&function(n,t,e){n.setAttribute("loading","lazy"),on(n,t,e),function(n,t){var e=Q[n.tagName];e&&e(n,t)}(n,t),k(n,h)}(n,t,e)})),G(e,0)}(r,a,this):(o=r,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,o)):this.loadAll(r)},destroy:function(){this._observer&&this._observer.disconnect(),vn(this._settings).forEach((function(n){$(n)})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;pn(n,e).forEach((function(n){z(n,t),rn(n,e,t)}))},restoreAll:function(){var n=this._settings;vn(n).forEach((function(t){sn(t,n)}))}},hn.load=function(n,t){var e=c(t);rn(n,e)},hn.resetStatus=function(n){w(n)},t&&function(n,t){if(t)if(t.length)for(var e,i=0;e=t[i];i+=1)u(n,e);else u(n,t)}(hn,window.lazyLoadOptions),hn})); +define((function(){"use strict";function n(){return n=Object.assign||function(n){for(var t=1;t1,r={elements_selector:".lazy",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",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},c=function(t){return n({},r,t)},u=function(n,t){var e,i="LazyLoad::Initialized",o=new n(t);try{e=new CustomEvent(i,{detail:{instance:o}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:o})}window.dispatchEvent(e)},l="src",s="srcset",f="sizes",d="poster",_="llOriginalAttrs",g="data",v="loading",b="loaded",p="applied",h="error",m="native",E="data-",I="ll-status",A=function(n,t){return n.getAttribute(E+t)},k=function(n){return A(n,I)},w=function(n,t){return function(n,t,e){var i="data-ll-status";null!==e?n.setAttribute(i,e):n.removeAttribute(i)}(n,0,t)},y=function(n){return w(n,null)},L=function(n){return null===k(n)},O=function(n){return k(n)===m},C=[v,b,p,h],x=function(n,t,e,i){n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},N=function(n,t){o?n.classList.add(t):n.className+=(n.className?" ":"")+t},M=function(n,t){o?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},z=function(n){return n.llTempImage},R=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},T=function(n,t){n&&(n.loadingCount+=t)},G=function(n,t){n&&(n.toLoadCount=t)},D=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},V=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&D(e).forEach(t)},F=function(n,t){D(n).forEach(t)},B=[l],J=[l,d],P=[l,s,f],S=[g],j=function(n){return!!n[_]},U=function(n){return n[_]},$=function(n){return delete n[_]},q=function(n,t){if(!j(n)){var e={};t.forEach((function(t){e[t]=n.getAttribute(t)})),n[_]=e}},H=function(n,t){if(j(n)){var e=U(n);t.forEach((function(t){!function(n,t,e){e?n.setAttribute(t,e):n.removeAttribute(t)}(n,t,e[t])}))}},K=function(n,t,e){N(n,t.class_loading),w(n,v),e&&(T(e,1),x(t.callback_loading,n,e))},Q=function(n,t,e){e&&n.setAttribute(t,e)},W=function(n,t){Q(n,f,A(n,t.data_sizes)),Q(n,s,A(n,t.data_srcset)),Q(n,l,A(n,t.data_src))},X={IMG:function(n,t){V(n,(function(n){q(n,P),W(n,t)})),q(n,P),W(n,t)},IFRAME:function(n,t){q(n,B),Q(n,l,A(n,t.data_src))},VIDEO:function(n,t){F(n,(function(n){q(n,B),Q(n,l,A(n,t.data_src))})),q(n,J),Q(n,d,A(n,t.data_poster)),Q(n,l,A(n,t.data_src)),n.load()},OBJECT:function(n,t){q(n,S),Q(n,g,A(n,t.data_src))}},Y=["IMG","IFRAME","VIDEO","OBJECT"],Z=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||x(n.callback_finish,t)},nn=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},tn=function(n,t,e){n.removeEventListener(t,e)},en=function(n){return!!n.llEvLisnrs},on=function(n){if(en(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];tn(n,e,i)}delete n.llEvLisnrs}},an=function(n,t,e){!function(n){delete n.llTempImage}(n),T(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),M(n,t.class_loading),t.unobserve_completed&&R(n,e)},rn=function(n,t,e){var i=z(n)||n;en(i)||function(n,t,e){en(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";nn(n,i,t),nn(n,"error",e)}(i,(function(o){!function(n,t,e,i){var o=O(t);an(t,e,i),N(t,e.class_loaded),w(t,b),x(e.callback_loaded,t,i),o||Z(e,i)}(0,n,t,e),on(i)}),(function(o){!function(n,t,e,i){var o=O(t);an(t,e,i),N(t,e.class_error),w(t,h),x(e.callback_error,t,i),o||Z(e,i)}(0,n,t,e),on(i)}))},cn=function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),rn(n,t,e),function(n){j(n)||(n[_]={backgroundImage:n.style.backgroundImage})}(n),function(n,t,e){var i=A(n,t.data_bg),o=A(n,t.data_bg_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage='url("'.concat(r,'")'),z(n).setAttribute(l,r),K(n,t,e))}(n,t,e),function(n,t,e){var i=A(n,t.data_bg_multi),o=A(n,t.data_bg_multi_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage=r,function(n,t,e){N(n,t.class_applied),w(n,p),e&&(t.unobserve_completed&&R(n,t),x(t.callback_applied,n,e))}(n,t,e))}(n,t,e)},un=function(n,t,e){!function(n){return Y.indexOf(n.tagName)>-1}(n)?cn(n,t,e):function(n,t,e){rn(n,t,e),function(n,t,e){var i=X[n.tagName];i&&(i(n,t),K(n,t,e))}(n,t,e)}(n,t,e)},ln=function(n){n.removeAttribute(l),n.removeAttribute(s),n.removeAttribute(f)},sn=function(n){V(n,(function(n){H(n,P)})),H(n,P)},fn={IMG:sn,IFRAME:function(n){H(n,B)},VIDEO:function(n){F(n,(function(n){H(n,B)})),H(n,J),n.load()},OBJECT:function(n){H(n,S)}},dn=function(n,t){(function(n){var t=fn[n.tagName];t?t(n):function(n){if(j(n)){var t=U(n);n.style.backgroundImage=t.backgroundImage}}(n)})(n),function(n,t){L(n)||O(n)||(M(n,t.class_entered),M(n,t.class_exited),M(n,t.class_applied),M(n,t.class_loading),M(n,t.class_loaded),M(n,t.class_error))}(n,t),y(n),$(n)},_n=["IMG","IFRAME","VIDEO"],gn=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},vn=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){var o=function(n){return C.indexOf(k(n))>=0}(n);w(n,"entered"),N(n,e.class_entered),M(n,e.class_exited),function(n,t,e){t.unobserve_entered&&R(n,e)}(n,e,i),x(e.callback_enter,n,t,i),o||un(n,e,i)}(n.target,n,t,e):function(n,t,e,i){L(n)||(N(n,e.class_exited),function(n,t,e,i){e.cancel_on_exit&&function(n){return k(n)===v}(n)&&"IMG"===n.tagName&&(on(n),function(n){V(n,(function(n){ln(n)})),ln(n)}(n),sn(n),M(n,e.class_loading),T(i,-1),y(n),x(e.callback_cancel,n,t,i))}(n,t,e,i),x(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},bn=function(n){return Array.prototype.slice.call(n)},pn=function(n){return n.container.querySelectorAll(n.elements_selector)},hn=function(n){return function(n){return k(n)===h}(n)},mn=function(n,t){return function(n){return bn(n).filter(L)}(n||pn(t))},En=function(n,e){var o=c(n);this._settings=o,this.loadingCount=0,function(n,t){i&&!gn(n)&&(t._observer=new IntersectionObserver((function(e){vn(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(o,this),function(n,e){t&&window.addEventListener("online",(function(){!function(n,t){var e;(e=pn(n),bn(e).filter(hn)).forEach((function(t){M(t,n.class_error),y(t)})),t.update()}(n,e)}))}(o,this),this.update(e)};return En.prototype={update:function(n){var t,o,a=this._settings,r=mn(n,a);G(this,r.length),!e&&i?gn(a)?function(n,t,e){n.forEach((function(n){-1!==_n.indexOf(n.tagName)&&function(n,t,e){n.setAttribute("loading","lazy"),rn(n,t,e),function(n,t){var e=X[n.tagName];e&&e(n,t)}(n,t),w(n,m)}(n,t,e)})),G(e,0)}(r,a,this):(o=r,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,o)):this.loadAll(r)},destroy:function(){this._observer&&this._observer.disconnect(),pn(this._settings).forEach((function(n){$(n)})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;mn(n,e).forEach((function(n){R(n,t),un(n,e,t)}))},restoreAll:function(){var n=this._settings;pn(n).forEach((function(t){dn(t,n)}))}},En.load=function(n,t){var e=c(t);un(n,e)},En.resetStatus=function(n){y(n)},t&&function(n,t){if(t)if(t.length)for(var e,i=0;e=t[i];i+=1)u(n,e);else u(n,t)}(En,window.lazyLoadOptions),En})); diff --git a/dist/lazyload.esm.js b/dist/lazyload.esm.js index 1ed0dac..26b38ce 100644 --- a/dist/lazyload.esm.js +++ b/dist/lazyload.esm.js @@ -85,6 +85,7 @@ const SRCSET = "srcset"; const SIZES = "sizes"; const POSTER = "poster"; const ORIGINALS = "llOriginalAttrs"; +const DATA = "data"; const statusLoading = "loading"; const statusLoaded = "loaded"; @@ -227,6 +228,7 @@ const forEachVideoSource = (element, fn) => { const attrsSrc = [SRC]; const attrsSrcPoster = [SRC, POSTER]; const attrsSrcSrcsetSizes = [SRC, SRCSET, SIZES]; +const attrsData = [DATA]; const hasOriginalAttrs = (element) => !!element[ORIGINALS]; const getOriginalAttrs = (element) => element[ORIGINALS]; @@ -235,6 +237,7 @@ const deleteOriginalAttrs = (element) => delete element[ORIGINALS]; // ## SAVE ## const setOriginalsObject = (element, attributes) => { + debugger; if (hasOriginalAttrs(element)) { return; } @@ -276,7 +279,7 @@ const restoreOriginalBgImage = (element) => { if (!hasOriginalAttrs(element)) { return; } - const originals = getOriginalAttrs(element); + const originals = getOriginalAttrs(element); element.style.backgroundImage = originals.backgroundImage; }; @@ -340,6 +343,11 @@ const setSourcesVideo = (videoEl, settings) => { videoEl.load(); }; +const setSourcesObject = (object, settings) => { + setOriginalsObject(object, attrsData); + setAttributeIfValue(object, DATA, getData(object, settings.data_src)); +}; + const setBackground = (element, settings, instance) => { const bg1xValue = getData(element, settings.data_bg); const bgHiDpiValue = getData(element, settings.data_bg_hidpi); @@ -367,7 +375,8 @@ const setMultiBackground = (element, settings, instance) => { const setSourcesFunctions = { IMG: setSourcesImg, IFRAME: setSourcesIframe, - VIDEO: setSourcesVideo + VIDEO: setSourcesVideo, + OBJECT: setSourcesObject }; const setSourcesNative = (element, settings) => { @@ -387,7 +396,7 @@ const setSources = (element, settings, instance) => { manageLoading(element, settings, instance); }; -const elementsWithLoadEvent = ["IMG", "IFRAME", "VIDEO"]; +const elementsWithLoadEvent = ["IMG", "IFRAME", "VIDEO", "OBJECT"]; const hasLoadEvent = (element) => elementsWithLoadEvent.indexOf(element.tagName) > -1; const checkFinish = (settings, instance) => { @@ -533,10 +542,15 @@ const restoreIframe = (iframeEl) => { restoreOriginalAttrs(iframeEl, attrsSrc); }; +const restoreObject = (objectEl) => { + restoreOriginalAttrs(objectEl, attrsData); +}; + const restoreFunctions = { IMG: restoreImg, IFRAME: restoreIframe, - VIDEO: restoreVideo + VIDEO: restoreVideo, + OBJECT: restoreObject }; const restoreAttributes = (element) => { diff --git a/dist/lazyload.esm.min.js b/dist/lazyload.esm.min.js index 0f77129..5a354d9 100644 --- a/dist/lazyload.esm.min.js +++ b/dist/lazyload.esm.min.js @@ -1 +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,s=e&&"classList"in document.createElement("p"),l=e&&window.devicePixelRatio>1,n={elements_selector:".lazy",container:t||e?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",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},o=e=>Object.assign({},n,e),r=function(e,t){let a;const s="LazyLoad::Initialized",l=new e(t);try{a=new CustomEvent(s,{detail:{instance:l}})}catch(e){a=document.createEvent("CustomEvent"),a.initCustomEvent(s,!1,!1,{instance:l})}window.dispatchEvent(a)},i="src",c="llOriginalAttrs",d=(e,t)=>e.getAttribute("data-"+t),_=e=>d(e,"ll-status"),u=(e,t)=>((e,t,a)=>{var s="data-ll-status";null!==a?e.setAttribute(s,a):e.removeAttribute(s)})(e,0,t),g=e=>u(e,null),b=e=>null===_(e),p=e=>"native"===_(e),m=["loading","loaded","applied","error"],h=(e,t,a,s)=>{e&&(void 0===s?void 0===a?e(t):e(t,a):e(t,a,s))},v=(e,t)=>{s?e.classList.add(t):e.className+=(e.className?" ":"")+t},f=(e,t)=>{s?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},E=e=>e.llTempImage,I=(e,t)=>{if(!t)return;const a=t._observer;a&&a.unobserve(e)},A=(e,t)=>{e&&(e.loadingCount+=t)},k=(e,t)=>{e&&(e.toLoadCount=t)},w=e=>{let t=[];for(let a,s=0;a=e.children[s];s+=1)"SOURCE"===a.tagName&&t.push(a);return t},L=(e,t)=>{const a=e.parentNode;a&&"PICTURE"===a.tagName&&w(a).forEach(t)},y=(e,t)=>{w(e).forEach(t)},x=[i],N=[i,"poster"],O=[i,"srcset","sizes"],C=e=>!!e[c],M=e=>e[c],z=e=>delete e[c],R=(e,t)=>{if(C(e))return;const a={};t.forEach((t=>{a[t]=e.getAttribute(t)})),e[c]=a},G=(e,t)=>{if(!C(e))return;const a=M(e);t.forEach((t=>{((e,t,a)=>{a?e.setAttribute(t,a):e.removeAttribute(t)})(e,t,a[t])}))},D=(e,t,a)=>{v(e,t.class_loading),u(e,"loading"),a&&(A(a,1),h(t.callback_loading,e,a))},T=(e,t,a)=>{a&&e.setAttribute(t,a)},V=(e,t)=>{T(e,"sizes",d(e,t.data_sizes)),T(e,"srcset",d(e,t.data_srcset)),T(e,i,d(e,t.data_src))},F={IMG:(e,t)=>{L(e,(e=>{R(e,O),V(e,t)})),R(e,O),V(e,t)},IFRAME:(e,t)=>{R(e,x),T(e,i,d(e,t.data_src))},VIDEO:(e,t)=>{y(e,(e=>{R(e,x),T(e,i,d(e,t.data_src))})),R(e,N),T(e,"poster",d(e,t.data_poster)),T(e,i,d(e,t.data_src)),e.load()}},S=["IMG","IFRAME","VIDEO"],$=(e,t)=>{!t||(e=>e.loadingCount>0)(t)||(e=>e.toLoadCount>0)(t)||h(e.callback_finish,t)},P=(e,t,a)=>{e.addEventListener(t,a),e.llEvLisnrs[t]=a},U=(e,t,a)=>{e.removeEventListener(t,a)},j=e=>!!e.llEvLisnrs,q=e=>{if(!j(e))return;const t=e.llEvLisnrs;for(let a in t){const s=t[a];U(e,a,s)}delete e.llEvLisnrs},H=(e,t,a)=>{(e=>{delete e.llTempImage})(e),A(a,-1),(e=>{e&&(e.toLoadCount-=1)})(a),f(e,t.class_loading),t.unobserve_completed&&I(e,a)},B=(e,t,a)=>{const s=E(e)||e;j(s)||((e,t,a)=>{j(e)||(e.llEvLisnrs={});const s="VIDEO"===e.tagName?"loadeddata":"load";P(e,s,t),P(e,"error",a)})(s,(l=>{((e,t,a,s)=>{const l=p(t);H(t,a,s),v(t,a.class_loaded),u(t,"loaded"),h(a.callback_loaded,t,s),l||$(a,s)})(0,e,t,a),q(s)}),(l=>{((e,t,a,s)=>{const l=p(t);H(t,a,s),v(t,a.class_error),u(t,"error"),h(a.callback_error,t,s),l||$(a,s)})(0,e,t,a),q(s)}))},J=(e,t,a)=>{(e=>{e.llTempImage=document.createElement("IMG")})(e),B(e,t,a),(e=>{C(e)||(e[c]={backgroundImage:e.style.backgroundImage})})(e),((e,t,a)=>{const s=d(e,t.data_bg),n=d(e,t.data_bg_hidpi),o=l&&n?n:s;o&&(e.style.backgroundImage=`url("${o}")`,E(e).setAttribute(i,o),D(e,t,a))})(e,t,a),((e,t,a)=>{const s=d(e,t.data_bg_multi),n=d(e,t.data_bg_multi_hidpi),o=l&&n?n:s;o&&(e.style.backgroundImage=o,((e,t,a)=>{v(e,t.class_applied),u(e,"applied"),a&&(t.unobserve_completed&&I(e,t),h(t.callback_applied,e,a))})(e,t,a))})(e,t,a)},K=(e,t,a)=>{(e=>S.indexOf(e.tagName)>-1)(e)?((e,t,a)=>{B(e,t,a),((e,t,a)=>{const s=F[e.tagName];s&&(s(e,t),D(e,t,a))})(e,t,a)})(e,t,a):J(e,t,a)},Q=e=>{e.removeAttribute(i),e.removeAttribute("srcset"),e.removeAttribute("sizes")},W=e=>{L(e,(e=>{G(e,O)})),G(e,O)},X={IMG:W,IFRAME:e=>{G(e,x)},VIDEO:e=>{y(e,(e=>{G(e,x)})),G(e,N),e.load()}},Y=(e,t)=>{(e=>{const t=X[e.tagName];t?t(e):(e=>{if(!C(e))return;const t=M(e);e.style.backgroundImage=t.backgroundImage})(e)})(e),((e,t)=>{b(e)||p(e)||(f(e,t.class_entered),f(e,t.class_exited),f(e,t.class_applied),f(e,t.class_loading),f(e,t.class_loaded),f(e,t.class_error))})(e,t),g(e),z(e)},Z=["IMG","IFRAME","VIDEO"],ee=e=>e.use_native&&"loading"in HTMLImageElement.prototype,te=(e,t,a)=>{e.forEach((e=>(e=>e.isIntersecting||e.intersectionRatio>0)(e)?((e,t,a,s)=>{const l=(e=>m.indexOf(_(e))>=0)(e);u(e,"entered"),v(e,a.class_entered),f(e,a.class_exited),((e,t,a)=>{t.unobserve_entered&&I(e,a)})(e,a,s),h(a.callback_enter,e,t,s),l||K(e,a,s)})(e.target,e,t,a):((e,t,a,s)=>{b(e)||(v(e,a.class_exited),((e,t,a,s)=>{a.cancel_on_exit&&(e=>"loading"===_(e))(e)&&"IMG"===e.tagName&&(q(e),(e=>{L(e,(e=>{Q(e)})),Q(e)})(e),W(e),f(e,a.class_loading),A(s,-1),g(e),h(a.callback_cancel,e,t,s))})(e,t,a,s),h(a.callback_exit,e,t,s))})(e.target,e,t,a)))},ae=e=>Array.prototype.slice.call(e),se=e=>e.container.querySelectorAll(e.elements_selector),le=e=>(e=>"error"===_(e))(e),ne=(e,t)=>(e=>ae(e).filter(b))(e||se(t)),oe=function(t,s){const l=o(t);this._settings=l,this.loadingCount=0,((e,t)=>{a&&!ee(e)&&(t._observer=new IntersectionObserver((a=>{te(a,e,t)}),(e=>({root:e.container===document?null:e.container,rootMargin:e.thresholds||e.threshold+"px"}))(e)))})(l,this),((t,a)=>{e&&window.addEventListener("online",(()=>{((e,t)=>{var a;(a=se(e),ae(a).filter(le)).forEach((t=>{f(t,e.class_error),g(t)})),t.update()})(t,a)}))})(l,this),this.update(s)};oe.prototype={update:function(e){const s=this._settings,l=ne(e,s);var n,o;k(this,l.length),!t&&a?ee(s)?((e,t,a)=>{e.forEach((e=>{-1!==Z.indexOf(e.tagName)&&((e,t,a)=>{e.setAttribute("loading","lazy"),B(e,t,a),((e,t)=>{const a=F[e.tagName];a&&a(e,t)})(e,t),u(e,"native")})(e,t,a)})),k(a,0)})(l,s,this):(o=l,(e=>{e.disconnect()})(n=this._observer),((e,t)=>{t.forEach((t=>{e.observe(t)}))})(n,o)):this.loadAll(l)},destroy:function(){this._observer&&this._observer.disconnect(),se(this._settings).forEach((e=>{z(e)})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(e){const t=this._settings;ne(e,t).forEach((e=>{I(e,this),K(e,t,this)}))},restoreAll:function(){const e=this._settings;se(e).forEach((t=>{Y(t,e)}))}},oe.load=(e,t)=>{const a=o(t);K(e,a)},oe.resetStatus=e=>{g(e)},e&&((e,t)=>{if(t)if(t.length)for(let a,s=0;a=t[s];s+=1)r(e,a);else r(e,t)})(oe,window.lazyLoadOptions);export{oe as default}; +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,s=e&&"classList"in document.createElement("p"),l=e&&window.devicePixelRatio>1,n={elements_selector:".lazy",container:t||e?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",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},o=e=>Object.assign({},n,e),r=function(e,t){let a;const s="LazyLoad::Initialized",l=new e(t);try{a=new CustomEvent(s,{detail:{instance:l}})}catch(e){a=document.createEvent("CustomEvent"),a.initCustomEvent(s,!1,!1,{instance:l})}window.dispatchEvent(a)},i="src",c="llOriginalAttrs",d=(e,t)=>e.getAttribute("data-"+t),_=e=>d(e,"ll-status"),u=(e,t)=>((e,t,a)=>{var s="data-ll-status";null!==a?e.setAttribute(s,a):e.removeAttribute(s)})(e,0,t),g=e=>u(e,null),b=e=>null===_(e),p=e=>"native"===_(e),m=["loading","loaded","applied","error"],h=(e,t,a,s)=>{e&&(void 0===s?void 0===a?e(t):e(t,a):e(t,a,s))},v=(e,t)=>{s?e.classList.add(t):e.className+=(e.className?" ":"")+t},E=(e,t)=>{s?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},f=e=>e.llTempImage,I=(e,t)=>{if(!t)return;const a=t._observer;a&&a.unobserve(e)},A=(e,t)=>{e&&(e.loadingCount+=t)},k=(e,t)=>{e&&(e.toLoadCount=t)},w=e=>{let t=[];for(let a,s=0;a=e.children[s];s+=1)"SOURCE"===a.tagName&&t.push(a);return t},L=(e,t)=>{const a=e.parentNode;a&&"PICTURE"===a.tagName&&w(a).forEach(t)},y=(e,t)=>{w(e).forEach(t)},O=[i],x=[i,"poster"],C=[i,"srcset","sizes"],N=["data"],M=e=>!!e[c],z=e=>e[c],R=e=>delete e[c],T=(e,t)=>{if(M(e))return;const a={};t.forEach((t=>{a[t]=e.getAttribute(t)})),e[c]=a},G=(e,t)=>{if(!M(e))return;const a=z(e);t.forEach((t=>{((e,t,a)=>{a?e.setAttribute(t,a):e.removeAttribute(t)})(e,t,a[t])}))},D=(e,t,a)=>{v(e,t.class_loading),u(e,"loading"),a&&(A(a,1),h(t.callback_loading,e,a))},V=(e,t,a)=>{a&&e.setAttribute(t,a)},F=(e,t)=>{V(e,"sizes",d(e,t.data_sizes)),V(e,"srcset",d(e,t.data_srcset)),V(e,i,d(e,t.data_src))},B={IMG:(e,t)=>{L(e,(e=>{T(e,C),F(e,t)})),T(e,C),F(e,t)},IFRAME:(e,t)=>{T(e,O),V(e,i,d(e,t.data_src))},VIDEO:(e,t)=>{y(e,(e=>{T(e,O),V(e,i,d(e,t.data_src))})),T(e,x),V(e,"poster",d(e,t.data_poster)),V(e,i,d(e,t.data_src)),e.load()},OBJECT:(e,t)=>{T(e,N),V(e,"data",d(e,t.data_src))}},J=["IMG","IFRAME","VIDEO","OBJECT"],S=(e,t)=>{!t||(e=>e.loadingCount>0)(t)||(e=>e.toLoadCount>0)(t)||h(e.callback_finish,t)},$=(e,t,a)=>{e.addEventListener(t,a),e.llEvLisnrs[t]=a},P=(e,t,a)=>{e.removeEventListener(t,a)},U=e=>!!e.llEvLisnrs,j=e=>{if(!U(e))return;const t=e.llEvLisnrs;for(let a in t){const s=t[a];P(e,a,s)}delete e.llEvLisnrs},q=(e,t,a)=>{(e=>{delete e.llTempImage})(e),A(a,-1),(e=>{e&&(e.toLoadCount-=1)})(a),E(e,t.class_loading),t.unobserve_completed&&I(e,a)},H=(e,t,a)=>{const s=f(e)||e;U(s)||((e,t,a)=>{U(e)||(e.llEvLisnrs={});const s="VIDEO"===e.tagName?"loadeddata":"load";$(e,s,t),$(e,"error",a)})(s,(l=>{((e,t,a,s)=>{const l=p(t);q(t,a,s),v(t,a.class_loaded),u(t,"loaded"),h(a.callback_loaded,t,s),l||S(a,s)})(0,e,t,a),j(s)}),(l=>{((e,t,a,s)=>{const l=p(t);q(t,a,s),v(t,a.class_error),u(t,"error"),h(a.callback_error,t,s),l||S(a,s)})(0,e,t,a),j(s)}))},K=(e,t,a)=>{(e=>{e.llTempImage=document.createElement("IMG")})(e),H(e,t,a),(e=>{M(e)||(e[c]={backgroundImage:e.style.backgroundImage})})(e),((e,t,a)=>{const s=d(e,t.data_bg),n=d(e,t.data_bg_hidpi),o=l&&n?n:s;o&&(e.style.backgroundImage=`url("${o}")`,f(e).setAttribute(i,o),D(e,t,a))})(e,t,a),((e,t,a)=>{const s=d(e,t.data_bg_multi),n=d(e,t.data_bg_multi_hidpi),o=l&&n?n:s;o&&(e.style.backgroundImage=o,((e,t,a)=>{v(e,t.class_applied),u(e,"applied"),a&&(t.unobserve_completed&&I(e,t),h(t.callback_applied,e,a))})(e,t,a))})(e,t,a)},Q=(e,t,a)=>{(e=>J.indexOf(e.tagName)>-1)(e)?((e,t,a)=>{H(e,t,a),((e,t,a)=>{const s=B[e.tagName];s&&(s(e,t),D(e,t,a))})(e,t,a)})(e,t,a):K(e,t,a)},W=e=>{e.removeAttribute(i),e.removeAttribute("srcset"),e.removeAttribute("sizes")},X=e=>{L(e,(e=>{G(e,C)})),G(e,C)},Y={IMG:X,IFRAME:e=>{G(e,O)},VIDEO:e=>{y(e,(e=>{G(e,O)})),G(e,x),e.load()},OBJECT:e=>{G(e,N)}},Z=(e,t)=>{(e=>{const t=Y[e.tagName];t?t(e):(e=>{if(!M(e))return;const t=z(e);e.style.backgroundImage=t.backgroundImage})(e)})(e),((e,t)=>{b(e)||p(e)||(E(e,t.class_entered),E(e,t.class_exited),E(e,t.class_applied),E(e,t.class_loading),E(e,t.class_loaded),E(e,t.class_error))})(e,t),g(e),R(e)},ee=["IMG","IFRAME","VIDEO"],te=e=>e.use_native&&"loading"in HTMLImageElement.prototype,ae=(e,t,a)=>{e.forEach((e=>(e=>e.isIntersecting||e.intersectionRatio>0)(e)?((e,t,a,s)=>{const l=(e=>m.indexOf(_(e))>=0)(e);u(e,"entered"),v(e,a.class_entered),E(e,a.class_exited),((e,t,a)=>{t.unobserve_entered&&I(e,a)})(e,a,s),h(a.callback_enter,e,t,s),l||Q(e,a,s)})(e.target,e,t,a):((e,t,a,s)=>{b(e)||(v(e,a.class_exited),((e,t,a,s)=>{a.cancel_on_exit&&(e=>"loading"===_(e))(e)&&"IMG"===e.tagName&&(j(e),(e=>{L(e,(e=>{W(e)})),W(e)})(e),X(e),E(e,a.class_loading),A(s,-1),g(e),h(a.callback_cancel,e,t,s))})(e,t,a,s),h(a.callback_exit,e,t,s))})(e.target,e,t,a)))},se=e=>Array.prototype.slice.call(e),le=e=>e.container.querySelectorAll(e.elements_selector),ne=e=>(e=>"error"===_(e))(e),oe=(e,t)=>(e=>se(e).filter(b))(e||le(t)),re=function(t,s){const l=o(t);this._settings=l,this.loadingCount=0,((e,t)=>{a&&!te(e)&&(t._observer=new IntersectionObserver((a=>{ae(a,e,t)}),(e=>({root:e.container===document?null:e.container,rootMargin:e.thresholds||e.threshold+"px"}))(e)))})(l,this),((t,a)=>{e&&window.addEventListener("online",(()=>{((e,t)=>{var a;(a=le(e),se(a).filter(ne)).forEach((t=>{E(t,e.class_error),g(t)})),t.update()})(t,a)}))})(l,this),this.update(s)};re.prototype={update:function(e){const s=this._settings,l=oe(e,s);var n,o;k(this,l.length),!t&&a?te(s)?((e,t,a)=>{e.forEach((e=>{-1!==ee.indexOf(e.tagName)&&((e,t,a)=>{e.setAttribute("loading","lazy"),H(e,t,a),((e,t)=>{const a=B[e.tagName];a&&a(e,t)})(e,t),u(e,"native")})(e,t,a)})),k(a,0)})(l,s,this):(o=l,(e=>{e.disconnect()})(n=this._observer),((e,t)=>{t.forEach((t=>{e.observe(t)}))})(n,o)):this.loadAll(l)},destroy:function(){this._observer&&this._observer.disconnect(),le(this._settings).forEach((e=>{R(e)})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(e){const t=this._settings;oe(e,t).forEach((e=>{I(e,this),Q(e,t,this)}))},restoreAll:function(){const e=this._settings;le(e).forEach((t=>{Z(t,e)}))}},re.load=(e,t)=>{const a=o(t);Q(e,a)},re.resetStatus=e=>{g(e)},e&&((e,t)=>{if(t)if(t.length)for(let a,s=0;a=t[s];s+=1)r(e,a);else r(e,t)})(re,window.lazyLoadOptions);export{re as default}; diff --git a/dist/lazyload.iife.js b/dist/lazyload.iife.js index e080025..0760118 100644 --- a/dist/lazyload.iife.js +++ b/dist/lazyload.iife.js @@ -109,6 +109,7 @@ var LazyLoad = (function () { var SIZES = "sizes"; var POSTER = "poster"; var ORIGINALS = "llOriginalAttrs"; + var DATA = "data"; var statusLoading = "loading"; var statusLoaded = "loaded"; @@ -265,6 +266,7 @@ var LazyLoad = (function () { var attrsSrc = [SRC]; var attrsSrcPoster = [SRC, POSTER]; var attrsSrcSrcsetSizes = [SRC, SRCSET, SIZES]; + var attrsData = [DATA]; var hasOriginalAttrs = function hasOriginalAttrs(element) { return !!element[ORIGINALS]; }; @@ -276,6 +278,8 @@ var LazyLoad = (function () { }; // ## SAVE ## var setOriginalsObject = function setOriginalsObject(element, attributes) { + debugger; + if (hasOriginalAttrs(element)) { return; } @@ -379,6 +383,10 @@ var LazyLoad = (function () { setAttributeIfValue(videoEl, SRC, getData(videoEl, settings.data_src)); videoEl.load(); }; + var setSourcesObject = function setSourcesObject(object, settings) { + setOriginalsObject(object, attrsData); + setAttributeIfValue(object, DATA, getData(object, settings.data_src)); + }; var setBackground = function setBackground(element, settings, instance) { var bg1xValue = getData(element, settings.data_bg); var bgHiDpiValue = getData(element, settings.data_bg_hidpi); @@ -406,7 +414,8 @@ var LazyLoad = (function () { var setSourcesFunctions = { IMG: setSourcesImg, IFRAME: setSourcesIframe, - VIDEO: setSourcesVideo + VIDEO: setSourcesVideo, + OBJECT: setSourcesObject }; var setSourcesNative = function setSourcesNative(element, settings) { var setSourcesFunction = setSourcesFunctions[element.tagName]; @@ -428,7 +437,7 @@ var LazyLoad = (function () { manageLoading(element, settings, instance); }; - var elementsWithLoadEvent = ["IMG", "IFRAME", "VIDEO"]; + var elementsWithLoadEvent = ["IMG", "IFRAME", "VIDEO", "OBJECT"]; var hasLoadEvent = function hasLoadEvent(element) { return elementsWithLoadEvent.indexOf(element.tagName) > -1; }; @@ -570,10 +579,14 @@ var LazyLoad = (function () { var restoreIframe = function restoreIframe(iframeEl) { restoreOriginalAttrs(iframeEl, attrsSrc); }; + var restoreObject = function restoreObject(objectEl) { + restoreOriginalAttrs(objectEl, attrsData); + }; var restoreFunctions = { IMG: restoreImg, IFRAME: restoreIframe, - VIDEO: restoreVideo + VIDEO: restoreVideo, + OBJECT: restoreObject }; var restoreAttributes = function restoreAttributes(element) { diff --git a/dist/lazyload.iife.min.js b/dist/lazyload.iife.min.js index f4edf43..8d7fd85 100644 --- a/dist/lazyload.iife.min.js +++ b/dist/lazyload.iife.min.js @@ -1 +1 @@ -var LazyLoad=function(){"use strict";function n(){return n=Object.assign||function(n){for(var t=1;t1,r={elements_selector:".lazy",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",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},c=function(t){return n({},r,t)},u=function(n,t){var e,i="LazyLoad::Initialized",o=new n(t);try{e=new CustomEvent(i,{detail:{instance:o}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:o})}window.dispatchEvent(e)},l="src",s="srcset",d="sizes",f="poster",_="llOriginalAttrs",v="loading",g="loaded",b="applied",p="error",h="native",m="data-",E="ll-status",I=function(n,t){return n.getAttribute(m+t)},A=function(n){return I(n,E)},k=function(n,t){return function(n,t,e){var i="data-ll-status";null!==e?n.setAttribute(i,e):n.removeAttribute(i)}(n,0,t)},y=function(n){return k(n,null)},L=function(n){return null===A(n)},w=function(n){return A(n)===h},O=[v,g,b,p],x=function(n,t,e,i){n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},N=function(n,t){o?n.classList.add(t):n.className+=(n.className?" ":"")+t},C=function(n,t){o?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},M=function(n){return n.llTempImage},z=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},R=function(n,t){n&&(n.loadingCount+=t)},G=function(n,t){n&&(n.toLoadCount=t)},D=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},T=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&D(e).forEach(t)},V=function(n,t){D(n).forEach(t)},F=[l],P=[l,f],S=[l,s,d],j=function(n){return!!n[_]},U=function(n){return n[_]},$=function(n){return delete n[_]},q=function(n,t){if(!j(n)){var e={};t.forEach((function(t){e[t]=n.getAttribute(t)})),n[_]=e}},H=function(n,t){if(j(n)){var e=U(n);t.forEach((function(t){!function(n,t,e){e?n.setAttribute(t,e):n.removeAttribute(t)}(n,t,e[t])}))}},B=function(n,t,e){N(n,t.class_loading),k(n,v),e&&(R(e,1),x(t.callback_loading,n,e))},J=function(n,t,e){e&&n.setAttribute(t,e)},K=function(n,t){J(n,d,I(n,t.data_sizes)),J(n,s,I(n,t.data_srcset)),J(n,l,I(n,t.data_src))},Q={IMG:function(n,t){T(n,(function(n){q(n,S),K(n,t)})),q(n,S),K(n,t)},IFRAME:function(n,t){q(n,F),J(n,l,I(n,t.data_src))},VIDEO:function(n,t){V(n,(function(n){q(n,F),J(n,l,I(n,t.data_src))})),q(n,P),J(n,f,I(n,t.data_poster)),J(n,l,I(n,t.data_src)),n.load()}},W=["IMG","IFRAME","VIDEO"],X=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||x(n.callback_finish,t)},Y=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},Z=function(n,t,e){n.removeEventListener(t,e)},nn=function(n){return!!n.llEvLisnrs},tn=function(n){if(nn(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];Z(n,e,i)}delete n.llEvLisnrs}},en=function(n,t,e){!function(n){delete n.llTempImage}(n),R(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),C(n,t.class_loading),t.unobserve_completed&&z(n,e)},on=function(n,t,e){var i=M(n)||n;nn(i)||function(n,t,e){nn(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";Y(n,i,t),Y(n,"error",e)}(i,(function(o){!function(n,t,e,i){var o=w(t);en(t,e,i),N(t,e.class_loaded),k(t,g),x(e.callback_loaded,t,i),o||X(e,i)}(0,n,t,e),tn(i)}),(function(o){!function(n,t,e,i){var o=w(t);en(t,e,i),N(t,e.class_error),k(t,p),x(e.callback_error,t,i),o||X(e,i)}(0,n,t,e),tn(i)}))},an=function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),on(n,t,e),function(n){j(n)||(n[_]={backgroundImage:n.style.backgroundImage})}(n),function(n,t,e){var i=I(n,t.data_bg),o=I(n,t.data_bg_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage='url("'.concat(r,'")'),M(n).setAttribute(l,r),B(n,t,e))}(n,t,e),function(n,t,e){var i=I(n,t.data_bg_multi),o=I(n,t.data_bg_multi_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage=r,function(n,t,e){N(n,t.class_applied),k(n,b),e&&(t.unobserve_completed&&z(n,t),x(t.callback_applied,n,e))}(n,t,e))}(n,t,e)},rn=function(n,t,e){!function(n){return W.indexOf(n.tagName)>-1}(n)?an(n,t,e):function(n,t,e){on(n,t,e),function(n,t,e){var i=Q[n.tagName];i&&(i(n,t),B(n,t,e))}(n,t,e)}(n,t,e)},cn=function(n){n.removeAttribute(l),n.removeAttribute(s),n.removeAttribute(d)},un=function(n){T(n,(function(n){H(n,S)})),H(n,S)},ln={IMG:un,IFRAME:function(n){H(n,F)},VIDEO:function(n){V(n,(function(n){H(n,F)})),H(n,P),n.load()}},sn=function(n,t){(function(n){var t=ln[n.tagName];t?t(n):function(n){if(j(n)){var t=U(n);n.style.backgroundImage=t.backgroundImage}}(n)})(n),function(n,t){L(n)||w(n)||(C(n,t.class_entered),C(n,t.class_exited),C(n,t.class_applied),C(n,t.class_loading),C(n,t.class_loaded),C(n,t.class_error))}(n,t),y(n),$(n)},dn=["IMG","IFRAME","VIDEO"],fn=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},_n=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){var o=function(n){return O.indexOf(A(n))>=0}(n);k(n,"entered"),N(n,e.class_entered),C(n,e.class_exited),function(n,t,e){t.unobserve_entered&&z(n,e)}(n,e,i),x(e.callback_enter,n,t,i),o||rn(n,e,i)}(n.target,n,t,e):function(n,t,e,i){L(n)||(N(n,e.class_exited),function(n,t,e,i){e.cancel_on_exit&&function(n){return A(n)===v}(n)&&"IMG"===n.tagName&&(tn(n),function(n){T(n,(function(n){cn(n)})),cn(n)}(n),un(n),C(n,e.class_loading),R(i,-1),y(n),x(e.callback_cancel,n,t,i))}(n,t,e,i),x(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},vn=function(n){return Array.prototype.slice.call(n)},gn=function(n){return n.container.querySelectorAll(n.elements_selector)},bn=function(n){return function(n){return A(n)===p}(n)},pn=function(n,t){return function(n){return vn(n).filter(L)}(n||gn(t))},hn=function(n,e){var o=c(n);this._settings=o,this.loadingCount=0,function(n,t){i&&!fn(n)&&(t._observer=new IntersectionObserver((function(e){_n(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(o,this),function(n,e){t&&window.addEventListener("online",(function(){!function(n,t){var e;(e=gn(n),vn(e).filter(bn)).forEach((function(t){C(t,n.class_error),y(t)})),t.update()}(n,e)}))}(o,this),this.update(e)};return hn.prototype={update:function(n){var t,o,a=this._settings,r=pn(n,a);G(this,r.length),!e&&i?fn(a)?function(n,t,e){n.forEach((function(n){-1!==dn.indexOf(n.tagName)&&function(n,t,e){n.setAttribute("loading","lazy"),on(n,t,e),function(n,t){var e=Q[n.tagName];e&&e(n,t)}(n,t),k(n,h)}(n,t,e)})),G(e,0)}(r,a,this):(o=r,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,o)):this.loadAll(r)},destroy:function(){this._observer&&this._observer.disconnect(),gn(this._settings).forEach((function(n){$(n)})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;pn(n,e).forEach((function(n){z(n,t),rn(n,e,t)}))},restoreAll:function(){var n=this._settings;gn(n).forEach((function(t){sn(t,n)}))}},hn.load=function(n,t){var e=c(t);rn(n,e)},hn.resetStatus=function(n){y(n)},t&&function(n,t){if(t)if(t.length)for(var e,i=0;e=t[i];i+=1)u(n,e);else u(n,t)}(hn,window.lazyLoadOptions),hn}(); +var LazyLoad=function(){"use strict";function n(){return n=Object.assign||function(n){for(var t=1;t1,r={elements_selector:".lazy",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",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},c=function(t){return n({},r,t)},u=function(n,t){var e,i="LazyLoad::Initialized",a=new n(t);try{e=new CustomEvent(i,{detail:{instance:a}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:a})}window.dispatchEvent(e)},l="src",s="srcset",d="sizes",f="poster",_="llOriginalAttrs",v="data",g="loading",b="loaded",p="applied",h="error",m="native",E="data-",I="ll-status",A=function(n,t){return n.getAttribute(E+t)},k=function(n){return A(n,I)},y=function(n,t){return function(n,t,e){var i="data-ll-status";null!==e?n.setAttribute(i,e):n.removeAttribute(i)}(n,0,t)},L=function(n){return y(n,null)},w=function(n){return null===k(n)},O=function(n){return k(n)===m},C=[g,b,p,h],x=function(n,t,e,i){n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},N=function(n,t){a?n.classList.add(t):n.className+=(n.className?" ":"")+t},M=function(n,t){a?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},z=function(n){return n.llTempImage},R=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},T=function(n,t){n&&(n.loadingCount+=t)},G=function(n,t){n&&(n.toLoadCount=t)},D=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},V=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&D(e).forEach(t)},F=function(n,t){D(n).forEach(t)},B=[l],J=[l,f],P=[l,s,d],S=[v],j=function(n){return!!n[_]},U=function(n){return n[_]},$=function(n){return delete n[_]},q=function(n,t){if(!j(n)){var e={};t.forEach((function(t){e[t]=n.getAttribute(t)})),n[_]=e}},H=function(n,t){if(j(n)){var e=U(n);t.forEach((function(t){!function(n,t,e){e?n.setAttribute(t,e):n.removeAttribute(t)}(n,t,e[t])}))}},K=function(n,t,e){N(n,t.class_loading),y(n,g),e&&(T(e,1),x(t.callback_loading,n,e))},Q=function(n,t,e){e&&n.setAttribute(t,e)},W=function(n,t){Q(n,d,A(n,t.data_sizes)),Q(n,s,A(n,t.data_srcset)),Q(n,l,A(n,t.data_src))},X={IMG:function(n,t){V(n,(function(n){q(n,P),W(n,t)})),q(n,P),W(n,t)},IFRAME:function(n,t){q(n,B),Q(n,l,A(n,t.data_src))},VIDEO:function(n,t){F(n,(function(n){q(n,B),Q(n,l,A(n,t.data_src))})),q(n,J),Q(n,f,A(n,t.data_poster)),Q(n,l,A(n,t.data_src)),n.load()},OBJECT:function(n,t){q(n,S),Q(n,v,A(n,t.data_src))}},Y=["IMG","IFRAME","VIDEO","OBJECT"],Z=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||x(n.callback_finish,t)},nn=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},tn=function(n,t,e){n.removeEventListener(t,e)},en=function(n){return!!n.llEvLisnrs},an=function(n){if(en(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];tn(n,e,i)}delete n.llEvLisnrs}},on=function(n,t,e){!function(n){delete n.llTempImage}(n),T(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),M(n,t.class_loading),t.unobserve_completed&&R(n,e)},rn=function(n,t,e){var i=z(n)||n;en(i)||function(n,t,e){en(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";nn(n,i,t),nn(n,"error",e)}(i,(function(a){!function(n,t,e,i){var a=O(t);on(t,e,i),N(t,e.class_loaded),y(t,b),x(e.callback_loaded,t,i),a||Z(e,i)}(0,n,t,e),an(i)}),(function(a){!function(n,t,e,i){var a=O(t);on(t,e,i),N(t,e.class_error),y(t,h),x(e.callback_error,t,i),a||Z(e,i)}(0,n,t,e),an(i)}))},cn=function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),rn(n,t,e),function(n){j(n)||(n[_]={backgroundImage:n.style.backgroundImage})}(n),function(n,t,e){var i=A(n,t.data_bg),a=A(n,t.data_bg_hidpi),r=o&&a?a:i;r&&(n.style.backgroundImage='url("'.concat(r,'")'),z(n).setAttribute(l,r),K(n,t,e))}(n,t,e),function(n,t,e){var i=A(n,t.data_bg_multi),a=A(n,t.data_bg_multi_hidpi),r=o&&a?a:i;r&&(n.style.backgroundImage=r,function(n,t,e){N(n,t.class_applied),y(n,p),e&&(t.unobserve_completed&&R(n,t),x(t.callback_applied,n,e))}(n,t,e))}(n,t,e)},un=function(n,t,e){!function(n){return Y.indexOf(n.tagName)>-1}(n)?cn(n,t,e):function(n,t,e){rn(n,t,e),function(n,t,e){var i=X[n.tagName];i&&(i(n,t),K(n,t,e))}(n,t,e)}(n,t,e)},ln=function(n){n.removeAttribute(l),n.removeAttribute(s),n.removeAttribute(d)},sn=function(n){V(n,(function(n){H(n,P)})),H(n,P)},dn={IMG:sn,IFRAME:function(n){H(n,B)},VIDEO:function(n){F(n,(function(n){H(n,B)})),H(n,J),n.load()},OBJECT:function(n){H(n,S)}},fn=function(n,t){(function(n){var t=dn[n.tagName];t?t(n):function(n){if(j(n)){var t=U(n);n.style.backgroundImage=t.backgroundImage}}(n)})(n),function(n,t){w(n)||O(n)||(M(n,t.class_entered),M(n,t.class_exited),M(n,t.class_applied),M(n,t.class_loading),M(n,t.class_loaded),M(n,t.class_error))}(n,t),L(n),$(n)},_n=["IMG","IFRAME","VIDEO"],vn=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},gn=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){var a=function(n){return C.indexOf(k(n))>=0}(n);y(n,"entered"),N(n,e.class_entered),M(n,e.class_exited),function(n,t,e){t.unobserve_entered&&R(n,e)}(n,e,i),x(e.callback_enter,n,t,i),a||un(n,e,i)}(n.target,n,t,e):function(n,t,e,i){w(n)||(N(n,e.class_exited),function(n,t,e,i){e.cancel_on_exit&&function(n){return k(n)===g}(n)&&"IMG"===n.tagName&&(an(n),function(n){V(n,(function(n){ln(n)})),ln(n)}(n),sn(n),M(n,e.class_loading),T(i,-1),L(n),x(e.callback_cancel,n,t,i))}(n,t,e,i),x(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},bn=function(n){return Array.prototype.slice.call(n)},pn=function(n){return n.container.querySelectorAll(n.elements_selector)},hn=function(n){return function(n){return k(n)===h}(n)},mn=function(n,t){return function(n){return bn(n).filter(w)}(n||pn(t))},En=function(n,e){var a=c(n);this._settings=a,this.loadingCount=0,function(n,t){i&&!vn(n)&&(t._observer=new IntersectionObserver((function(e){gn(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(a,this),function(n,e){t&&window.addEventListener("online",(function(){!function(n,t){var e;(e=pn(n),bn(e).filter(hn)).forEach((function(t){M(t,n.class_error),L(t)})),t.update()}(n,e)}))}(a,this),this.update(e)};return En.prototype={update:function(n){var t,a,o=this._settings,r=mn(n,o);G(this,r.length),!e&&i?vn(o)?function(n,t,e){n.forEach((function(n){-1!==_n.indexOf(n.tagName)&&function(n,t,e){n.setAttribute("loading","lazy"),rn(n,t,e),function(n,t){var e=X[n.tagName];e&&e(n,t)}(n,t),y(n,m)}(n,t,e)})),G(e,0)}(r,o,this):(a=r,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,a)):this.loadAll(r)},destroy:function(){this._observer&&this._observer.disconnect(),pn(this._settings).forEach((function(n){$(n)})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;mn(n,e).forEach((function(n){R(n,t),un(n,e,t)}))},restoreAll:function(){var n=this._settings;pn(n).forEach((function(t){fn(t,n)}))}},En.load=function(n,t){var e=c(t);un(n,e)},En.resetStatus=function(n){L(n)},t&&function(n,t){if(t)if(t.length)for(var e,i=0;e=t[i];i+=1)u(n,e);else u(n,t)}(En,window.lazyLoadOptions),En}(); diff --git a/dist/lazyload.js b/dist/lazyload.js index 2e4aaf7..224e81b 100644 --- a/dist/lazyload.js +++ b/dist/lazyload.js @@ -112,6 +112,7 @@ var SIZES = "sizes"; var POSTER = "poster"; var ORIGINALS = "llOriginalAttrs"; + var DATA = "data"; var statusLoading = "loading"; var statusLoaded = "loaded"; @@ -268,6 +269,7 @@ var attrsSrc = [SRC]; var attrsSrcPoster = [SRC, POSTER]; var attrsSrcSrcsetSizes = [SRC, SRCSET, SIZES]; + var attrsData = [DATA]; var hasOriginalAttrs = function hasOriginalAttrs(element) { return !!element[ORIGINALS]; }; @@ -279,6 +281,8 @@ }; // ## SAVE ## var setOriginalsObject = function setOriginalsObject(element, attributes) { + debugger; + if (hasOriginalAttrs(element)) { return; } @@ -382,6 +386,10 @@ setAttributeIfValue(videoEl, SRC, getData(videoEl, settings.data_src)); videoEl.load(); }; + var setSourcesObject = function setSourcesObject(object, settings) { + setOriginalsObject(object, attrsData); + setAttributeIfValue(object, DATA, getData(object, settings.data_src)); + }; var setBackground = function setBackground(element, settings, instance) { var bg1xValue = getData(element, settings.data_bg); var bgHiDpiValue = getData(element, settings.data_bg_hidpi); @@ -409,7 +417,8 @@ var setSourcesFunctions = { IMG: setSourcesImg, IFRAME: setSourcesIframe, - VIDEO: setSourcesVideo + VIDEO: setSourcesVideo, + OBJECT: setSourcesObject }; var setSourcesNative = function setSourcesNative(element, settings) { var setSourcesFunction = setSourcesFunctions[element.tagName]; @@ -431,7 +440,7 @@ manageLoading(element, settings, instance); }; - var elementsWithLoadEvent = ["IMG", "IFRAME", "VIDEO"]; + var elementsWithLoadEvent = ["IMG", "IFRAME", "VIDEO", "OBJECT"]; var hasLoadEvent = function hasLoadEvent(element) { return elementsWithLoadEvent.indexOf(element.tagName) > -1; }; @@ -573,10 +582,14 @@ var restoreIframe = function restoreIframe(iframeEl) { restoreOriginalAttrs(iframeEl, attrsSrc); }; + var restoreObject = function restoreObject(objectEl) { + restoreOriginalAttrs(objectEl, attrsData); + }; var restoreFunctions = { IMG: restoreImg, IFRAME: restoreIframe, - VIDEO: restoreVideo + VIDEO: restoreVideo, + OBJECT: restoreObject }; var restoreAttributes = function restoreAttributes(element) { diff --git a/dist/lazyload.min.js b/dist/lazyload.min.js index 2b1b196..906824c 100644 --- a/dist/lazyload.min.js +++ b/dist/lazyload.min.js @@ -1 +1 @@ -!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(n="undefined"!=typeof globalThis?globalThis:n||self).LazyLoad=t()}(this,(function(){"use strict";function n(){return n=Object.assign||function(n){for(var t=1;t1,r={elements_selector:".lazy",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",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},c=function(t){return n({},r,t)},u=function(n,t){var e,i="LazyLoad::Initialized",o=new n(t);try{e=new CustomEvent(i,{detail:{instance:o}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:o})}window.dispatchEvent(e)},l="src",s="srcset",f="sizes",d="poster",_="llOriginalAttrs",g="loading",v="loaded",b="applied",p="error",h="native",m="data-",E="ll-status",I=function(n,t){return n.getAttribute(m+t)},y=function(n){return I(n,E)},A=function(n,t){return function(n,t,e){var i="data-ll-status";null!==e?n.setAttribute(i,e):n.removeAttribute(i)}(n,0,t)},k=function(n){return A(n,null)},L=function(n){return null===y(n)},w=function(n){return y(n)===h},x=[g,v,b,p],O=function(n,t,e,i){n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},N=function(n,t){o?n.classList.add(t):n.className+=(n.className?" ":"")+t},C=function(n,t){o?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},M=function(n){return n.llTempImage},z=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},R=function(n,t){n&&(n.loadingCount+=t)},T=function(n,t){n&&(n.toLoadCount=t)},G=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},D=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&G(e).forEach(t)},V=function(n,t){G(n).forEach(t)},F=[l],j=[l,d],P=[l,s,f],S=function(n){return!!n[_]},U=function(n){return n[_]},$=function(n){return delete n[_]},q=function(n,t){if(!S(n)){var e={};t.forEach((function(t){e[t]=n.getAttribute(t)})),n[_]=e}},H=function(n,t){if(S(n)){var e=U(n);t.forEach((function(t){!function(n,t,e){e?n.setAttribute(t,e):n.removeAttribute(t)}(n,t,e[t])}))}},B=function(n,t,e){N(n,t.class_loading),A(n,g),e&&(R(e,1),O(t.callback_loading,n,e))},J=function(n,t,e){e&&n.setAttribute(t,e)},K=function(n,t){J(n,f,I(n,t.data_sizes)),J(n,s,I(n,t.data_srcset)),J(n,l,I(n,t.data_src))},Q={IMG:function(n,t){D(n,(function(n){q(n,P),K(n,t)})),q(n,P),K(n,t)},IFRAME:function(n,t){q(n,F),J(n,l,I(n,t.data_src))},VIDEO:function(n,t){V(n,(function(n){q(n,F),J(n,l,I(n,t.data_src))})),q(n,j),J(n,d,I(n,t.data_poster)),J(n,l,I(n,t.data_src)),n.load()}},W=["IMG","IFRAME","VIDEO"],X=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||O(n.callback_finish,t)},Y=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},Z=function(n,t,e){n.removeEventListener(t,e)},nn=function(n){return!!n.llEvLisnrs},tn=function(n){if(nn(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];Z(n,e,i)}delete n.llEvLisnrs}},en=function(n,t,e){!function(n){delete n.llTempImage}(n),R(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),C(n,t.class_loading),t.unobserve_completed&&z(n,e)},on=function(n,t,e){var i=M(n)||n;nn(i)||function(n,t,e){nn(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";Y(n,i,t),Y(n,"error",e)}(i,(function(o){!function(n,t,e,i){var o=w(t);en(t,e,i),N(t,e.class_loaded),A(t,v),O(e.callback_loaded,t,i),o||X(e,i)}(0,n,t,e),tn(i)}),(function(o){!function(n,t,e,i){var o=w(t);en(t,e,i),N(t,e.class_error),A(t,p),O(e.callback_error,t,i),o||X(e,i)}(0,n,t,e),tn(i)}))},an=function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),on(n,t,e),function(n){S(n)||(n[_]={backgroundImage:n.style.backgroundImage})}(n),function(n,t,e){var i=I(n,t.data_bg),o=I(n,t.data_bg_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage='url("'.concat(r,'")'),M(n).setAttribute(l,r),B(n,t,e))}(n,t,e),function(n,t,e){var i=I(n,t.data_bg_multi),o=I(n,t.data_bg_multi_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage=r,function(n,t,e){N(n,t.class_applied),A(n,b),e&&(t.unobserve_completed&&z(n,t),O(t.callback_applied,n,e))}(n,t,e))}(n,t,e)},rn=function(n,t,e){!function(n){return W.indexOf(n.tagName)>-1}(n)?an(n,t,e):function(n,t,e){on(n,t,e),function(n,t,e){var i=Q[n.tagName];i&&(i(n,t),B(n,t,e))}(n,t,e)}(n,t,e)},cn=function(n){n.removeAttribute(l),n.removeAttribute(s),n.removeAttribute(f)},un=function(n){D(n,(function(n){H(n,P)})),H(n,P)},ln={IMG:un,IFRAME:function(n){H(n,F)},VIDEO:function(n){V(n,(function(n){H(n,F)})),H(n,j),n.load()}},sn=function(n,t){(function(n){var t=ln[n.tagName];t?t(n):function(n){if(S(n)){var t=U(n);n.style.backgroundImage=t.backgroundImage}}(n)})(n),function(n,t){L(n)||w(n)||(C(n,t.class_entered),C(n,t.class_exited),C(n,t.class_applied),C(n,t.class_loading),C(n,t.class_loaded),C(n,t.class_error))}(n,t),k(n),$(n)},fn=["IMG","IFRAME","VIDEO"],dn=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},_n=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){var o=function(n){return x.indexOf(y(n))>=0}(n);A(n,"entered"),N(n,e.class_entered),C(n,e.class_exited),function(n,t,e){t.unobserve_entered&&z(n,e)}(n,e,i),O(e.callback_enter,n,t,i),o||rn(n,e,i)}(n.target,n,t,e):function(n,t,e,i){L(n)||(N(n,e.class_exited),function(n,t,e,i){e.cancel_on_exit&&function(n){return y(n)===g}(n)&&"IMG"===n.tagName&&(tn(n),function(n){D(n,(function(n){cn(n)})),cn(n)}(n),un(n),C(n,e.class_loading),R(i,-1),k(n),O(e.callback_cancel,n,t,i))}(n,t,e,i),O(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},gn=function(n){return Array.prototype.slice.call(n)},vn=function(n){return n.container.querySelectorAll(n.elements_selector)},bn=function(n){return function(n){return y(n)===p}(n)},pn=function(n,t){return function(n){return gn(n).filter(L)}(n||vn(t))},hn=function(n,e){var o=c(n);this._settings=o,this.loadingCount=0,function(n,t){i&&!dn(n)&&(t._observer=new IntersectionObserver((function(e){_n(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(o,this),function(n,e){t&&window.addEventListener("online",(function(){!function(n,t){var e;(e=vn(n),gn(e).filter(bn)).forEach((function(t){C(t,n.class_error),k(t)})),t.update()}(n,e)}))}(o,this),this.update(e)};return hn.prototype={update:function(n){var t,o,a=this._settings,r=pn(n,a);T(this,r.length),!e&&i?dn(a)?function(n,t,e){n.forEach((function(n){-1!==fn.indexOf(n.tagName)&&function(n,t,e){n.setAttribute("loading","lazy"),on(n,t,e),function(n,t){var e=Q[n.tagName];e&&e(n,t)}(n,t),A(n,h)}(n,t,e)})),T(e,0)}(r,a,this):(o=r,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,o)):this.loadAll(r)},destroy:function(){this._observer&&this._observer.disconnect(),vn(this._settings).forEach((function(n){$(n)})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;pn(n,e).forEach((function(n){z(n,t),rn(n,e,t)}))},restoreAll:function(){var n=this._settings;vn(n).forEach((function(t){sn(t,n)}))}},hn.load=function(n,t){var e=c(t);rn(n,e)},hn.resetStatus=function(n){k(n)},t&&function(n,t){if(t)if(t.length)for(var e,i=0;e=t[i];i+=1)u(n,e);else u(n,t)}(hn,window.lazyLoadOptions),hn})); +!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(n="undefined"!=typeof globalThis?globalThis:n||self).LazyLoad=t()}(this,(function(){"use strict";function n(){return n=Object.assign||function(n){for(var t=1;t1,r={elements_selector:".lazy",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",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},c=function(t){return n({},r,t)},u=function(n,t){var e,i="LazyLoad::Initialized",o=new n(t);try{e=new CustomEvent(i,{detail:{instance:o}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:o})}window.dispatchEvent(e)},l="src",s="srcset",f="sizes",d="poster",_="llOriginalAttrs",g="data",v="loading",b="loaded",p="applied",h="error",m="native",E="data-",I="ll-status",y=function(n,t){return n.getAttribute(E+t)},A=function(n){return y(n,I)},k=function(n,t){return function(n,t,e){var i="data-ll-status";null!==e?n.setAttribute(i,e):n.removeAttribute(i)}(n,0,t)},L=function(n){return k(n,null)},w=function(n){return null===A(n)},O=function(n){return A(n)===m},x=[v,b,p,h],C=function(n,t,e,i){n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},N=function(n,t){o?n.classList.add(t):n.className+=(n.className?" ":"")+t},M=function(n,t){o?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},z=function(n){return n.llTempImage},T=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},R=function(n,t){n&&(n.loadingCount+=t)},G=function(n,t){n&&(n.toLoadCount=t)},D=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},V=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&D(e).forEach(t)},F=function(n,t){D(n).forEach(t)},j=[l],B=[l,d],J=[l,s,f],P=[g],S=function(n){return!!n[_]},U=function(n){return n[_]},$=function(n){return delete n[_]},q=function(n,t){if(!S(n)){var e={};t.forEach((function(t){e[t]=n.getAttribute(t)})),n[_]=e}},H=function(n,t){if(S(n)){var e=U(n);t.forEach((function(t){!function(n,t,e){e?n.setAttribute(t,e):n.removeAttribute(t)}(n,t,e[t])}))}},K=function(n,t,e){N(n,t.class_loading),k(n,v),e&&(R(e,1),C(t.callback_loading,n,e))},Q=function(n,t,e){e&&n.setAttribute(t,e)},W=function(n,t){Q(n,f,y(n,t.data_sizes)),Q(n,s,y(n,t.data_srcset)),Q(n,l,y(n,t.data_src))},X={IMG:function(n,t){V(n,(function(n){q(n,J),W(n,t)})),q(n,J),W(n,t)},IFRAME:function(n,t){q(n,j),Q(n,l,y(n,t.data_src))},VIDEO:function(n,t){F(n,(function(n){q(n,j),Q(n,l,y(n,t.data_src))})),q(n,B),Q(n,d,y(n,t.data_poster)),Q(n,l,y(n,t.data_src)),n.load()},OBJECT:function(n,t){q(n,P),Q(n,g,y(n,t.data_src))}},Y=["IMG","IFRAME","VIDEO","OBJECT"],Z=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||C(n.callback_finish,t)},nn=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},tn=function(n,t,e){n.removeEventListener(t,e)},en=function(n){return!!n.llEvLisnrs},on=function(n){if(en(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];tn(n,e,i)}delete n.llEvLisnrs}},an=function(n,t,e){!function(n){delete n.llTempImage}(n),R(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),M(n,t.class_loading),t.unobserve_completed&&T(n,e)},rn=function(n,t,e){var i=z(n)||n;en(i)||function(n,t,e){en(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";nn(n,i,t),nn(n,"error",e)}(i,(function(o){!function(n,t,e,i){var o=O(t);an(t,e,i),N(t,e.class_loaded),k(t,b),C(e.callback_loaded,t,i),o||Z(e,i)}(0,n,t,e),on(i)}),(function(o){!function(n,t,e,i){var o=O(t);an(t,e,i),N(t,e.class_error),k(t,h),C(e.callback_error,t,i),o||Z(e,i)}(0,n,t,e),on(i)}))},cn=function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),rn(n,t,e),function(n){S(n)||(n[_]={backgroundImage:n.style.backgroundImage})}(n),function(n,t,e){var i=y(n,t.data_bg),o=y(n,t.data_bg_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage='url("'.concat(r,'")'),z(n).setAttribute(l,r),K(n,t,e))}(n,t,e),function(n,t,e){var i=y(n,t.data_bg_multi),o=y(n,t.data_bg_multi_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage=r,function(n,t,e){N(n,t.class_applied),k(n,p),e&&(t.unobserve_completed&&T(n,t),C(t.callback_applied,n,e))}(n,t,e))}(n,t,e)},un=function(n,t,e){!function(n){return Y.indexOf(n.tagName)>-1}(n)?cn(n,t,e):function(n,t,e){rn(n,t,e),function(n,t,e){var i=X[n.tagName];i&&(i(n,t),K(n,t,e))}(n,t,e)}(n,t,e)},ln=function(n){n.removeAttribute(l),n.removeAttribute(s),n.removeAttribute(f)},sn=function(n){V(n,(function(n){H(n,J)})),H(n,J)},fn={IMG:sn,IFRAME:function(n){H(n,j)},VIDEO:function(n){F(n,(function(n){H(n,j)})),H(n,B),n.load()},OBJECT:function(n){H(n,P)}},dn=function(n,t){(function(n){var t=fn[n.tagName];t?t(n):function(n){if(S(n)){var t=U(n);n.style.backgroundImage=t.backgroundImage}}(n)})(n),function(n,t){w(n)||O(n)||(M(n,t.class_entered),M(n,t.class_exited),M(n,t.class_applied),M(n,t.class_loading),M(n,t.class_loaded),M(n,t.class_error))}(n,t),L(n),$(n)},_n=["IMG","IFRAME","VIDEO"],gn=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},vn=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){var o=function(n){return x.indexOf(A(n))>=0}(n);k(n,"entered"),N(n,e.class_entered),M(n,e.class_exited),function(n,t,e){t.unobserve_entered&&T(n,e)}(n,e,i),C(e.callback_enter,n,t,i),o||un(n,e,i)}(n.target,n,t,e):function(n,t,e,i){w(n)||(N(n,e.class_exited),function(n,t,e,i){e.cancel_on_exit&&function(n){return A(n)===v}(n)&&"IMG"===n.tagName&&(on(n),function(n){V(n,(function(n){ln(n)})),ln(n)}(n),sn(n),M(n,e.class_loading),R(i,-1),L(n),C(e.callback_cancel,n,t,i))}(n,t,e,i),C(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},bn=function(n){return Array.prototype.slice.call(n)},pn=function(n){return n.container.querySelectorAll(n.elements_selector)},hn=function(n){return function(n){return A(n)===h}(n)},mn=function(n,t){return function(n){return bn(n).filter(w)}(n||pn(t))},En=function(n,e){var o=c(n);this._settings=o,this.loadingCount=0,function(n,t){i&&!gn(n)&&(t._observer=new IntersectionObserver((function(e){vn(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(o,this),function(n,e){t&&window.addEventListener("online",(function(){!function(n,t){var e;(e=pn(n),bn(e).filter(hn)).forEach((function(t){M(t,n.class_error),L(t)})),t.update()}(n,e)}))}(o,this),this.update(e)};return En.prototype={update:function(n){var t,o,a=this._settings,r=mn(n,a);G(this,r.length),!e&&i?gn(a)?function(n,t,e){n.forEach((function(n){-1!==_n.indexOf(n.tagName)&&function(n,t,e){n.setAttribute("loading","lazy"),rn(n,t,e),function(n,t){var e=X[n.tagName];e&&e(n,t)}(n,t),k(n,m)}(n,t,e)})),G(e,0)}(r,a,this):(o=r,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,o)):this.loadAll(r)},destroy:function(){this._observer&&this._observer.disconnect(),pn(this._settings).forEach((function(n){$(n)})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;mn(n,e).forEach((function(n){T(n,t),un(n,e,t)}))},restoreAll:function(){var n=this._settings;pn(n).forEach((function(t){dn(t,n)}))}},En.load=function(n,t){var e=c(t);un(n,e)},En.resetStatus=function(n){L(n)},t&&function(n,t){if(t)if(t.length)for(var e,i=0;e=t[i];i+=1)u(n,e);else u(n,t)}(En,window.lazyLoadOptions),En})); diff --git a/package.json b/package.json index e896631..73f766d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vanilla-lazyload", - "version": "17.5.1", + "version": "17.6.0", "description": "LazyLoad is a lightweight (2.4 kB) and flexible script that speeds up your web application by deferring the loading of your below-the-fold images, videos and iframes to when they will enter the viewport. It's written in plain \"vanilla\" JavaScript, it leverages the IntersectionObserver API, it supports responsive images, it optimizes your website for slower connections, and can enable native lazy loading.", "main": "dist/lazyload.min.js", "module": "dist/lazyload.esm.js", diff --git a/src/constants.js b/src/constants.js index 5c146fb..9c63a3e 100644 --- a/src/constants.js +++ b/src/constants.js @@ -3,3 +3,4 @@ export const SRCSET = "srcset"; export const SIZES = "sizes"; export const POSTER = "poster"; export const ORIGINALS = "llOriginalAttrs"; +export const DATA = "data"; \ No newline at end of file diff --git a/src/event.js b/src/event.js index 6db8777..e10844b 100644 --- a/src/event.js +++ b/src/event.js @@ -11,7 +11,7 @@ import { isSomethingLoading } from "./counters"; -const elementsWithLoadEvent = ["IMG", "IFRAME", "VIDEO"]; +const elementsWithLoadEvent = ["IMG", "IFRAME", "VIDEO", "OBJECT"]; export const hasLoadEvent = (element) => elementsWithLoadEvent.indexOf(element.tagName) > -1; export const checkFinish = (settings, instance) => { diff --git a/src/originalAttributes.js b/src/originalAttributes.js index c6cee46..412f536 100644 --- a/src/originalAttributes.js +++ b/src/originalAttributes.js @@ -1,8 +1,9 @@ -import { SRC, SRCSET, SIZES, POSTER, ORIGINALS } from "./constants.js"; +import { SRC, SRCSET, SIZES, POSTER, ORIGINALS, DATA } from "./constants.js"; export const attrsSrc = [SRC]; export const attrsSrcPoster = [SRC, POSTER]; export const attrsSrcSrcsetSizes = [SRC, SRCSET, SIZES]; +export const attrsData = [DATA]; export const hasOriginalAttrs = (element) => !!element[ORIGINALS]; export const getOriginalAttrs = (element) => element[ORIGINALS]; @@ -11,6 +12,7 @@ export const deleteOriginalAttrs = (element) => delete element[ORIGINALS]; // ## SAVE ## export const setOriginalsObject = (element, attributes) => { + debugger; if (hasOriginalAttrs(element)) { return; } @@ -44,7 +46,7 @@ export const restoreOriginalAttrs = (element, attributes) => { } const originals = getOriginalAttrs(element); attributes.forEach((attribute) => { - setOrResetAttribute(element, attribute, originals[attribute]) + setOrResetAttribute(element, attribute, originals[attribute]); }); }; @@ -52,6 +54,6 @@ export const restoreOriginalBgImage = (element) => { if (!hasOriginalAttrs(element)) { return; } - const originals = getOriginalAttrs(element); + const originals = getOriginalAttrs(element); element.style.backgroundImage = originals.backgroundImage; }; diff --git a/src/restore.js b/src/restore.js index 72d7926..4f11383 100644 --- a/src/restore.js +++ b/src/restore.js @@ -12,6 +12,7 @@ import { attrsSrcSrcsetSizes, attrsSrc, attrsSrcPoster, + attrsData, deleteOriginalAttrs } from "./originalAttributes"; @@ -34,10 +35,15 @@ export const restoreIframe = (iframeEl) => { restoreOriginalAttrs(iframeEl, attrsSrc); }; +export const restoreObject = (objectEl) => { + restoreOriginalAttrs(objectEl, attrsData); +}; + const restoreFunctions = { IMG: restoreImg, IFRAME: restoreIframe, - VIDEO: restoreVideo + VIDEO: restoreVideo, + OBJECT: restoreObject }; const restoreAttributes = (element) => { diff --git a/src/set.js b/src/set.js index 50d0e9b..b401fd0 100644 --- a/src/set.js +++ b/src/set.js @@ -1,4 +1,4 @@ -import { SRC, SRCSET, SIZES, POSTER } from "./constants.js"; +import { SRC, SRCSET, SIZES, POSTER, DATA } from "./constants.js"; import { getData, setStatus } from "./data"; import { statusLoading, statusApplied } from "./elementStatus"; import { safeCallback } from "./callback"; @@ -12,6 +12,7 @@ import { attrsSrc, attrsSrcPoster, attrsSrcSrcsetSizes, + attrsData, setOriginalsObject } from "./originalAttributes"; @@ -75,6 +76,11 @@ export const setSourcesVideo = (videoEl, settings) => { videoEl.load(); }; +export const setSourcesObject = (object, settings) => { + setOriginalsObject(object, attrsData); + setAttributeIfValue(object, DATA, getData(object, settings.data_src)); +}; + export const setBackground = (element, settings, instance) => { const bg1xValue = getData(element, settings.data_bg); const bgHiDpiValue = getData(element, settings.data_bg_hidpi); @@ -102,7 +108,8 @@ export const setMultiBackground = (element, settings, instance) => { const setSourcesFunctions = { IMG: setSourcesImg, IFRAME: setSourcesIframe, - VIDEO: setSourcesVideo + VIDEO: setSourcesVideo, + OBJECT: setSourcesObject }; export const setSourcesNative = (element, settings) => {