unlazy/dist/unlazy.with-hashing.iife.js

Universal lazy loading library for placeholder images leveraging native browser APIs

var UnLazy=(function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});let t=new Uint8Array(128);for(let e=0;e<83;e++)t[`0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,-.:;=?@[]^_{|}~`.charCodeAt(e)]=e;let n=(e,n,r)=>{let i=0;for(;n<r;)i*=83,i+=t[e.charCodeAt(n++)];return i},r=Math.pow,i=Math.PI,a=i*2,o=3294.6,s=269.025,c=e=>e>10.31475?r(e/s+.052132,2.4):e/o,l=e=>~~(e>1227e-8?s*r(e,.416666)-13.025:e*o+1),u=e=>(e<0?-1:1)*e*e,d=e=>{for(e+=i/2;e>i;)e-=a;let t=1.27323954*e-.405284735*u(e);return .225*(u(t)-t)+t};function f(e){let t=n(e,2,6);return[t>>16,t>>8&255,t&255]}function p(e,t,r,a){let o=n(e,0,1),s=o%9+1,p=~~(o/9)+1,m=s*p,h=0,g=0,_=0,v=0,y=0,b=0,x=0,S=0,C=0,w=0,T=0,E=0,D=(n(e,1,2)+1)/13446*(a|1),O=new Float64Array(m*3),k=f(e);for(h=0;h<3;h++)O[h]=c(k[h]);for(h=1;h<m;h++)E=n(e,4+h*2,6+h*2),O[h*3]=u(~~(E/361)-9)*D,O[h*3+1]=u(~~(E/19)%19-9)*D,O[h*3+2]=u(E%19-9)*D;let A=new Float64Array(p*r),j=new Float64Array(s*t);for(g=0;g<p;g++)for(v=0;v<r;v++)A[g*r+v]=d(i*v*g/r);for(h=0;h<s;h++)for(_=0;_<t;_++)j[h*t+_]=d(i*_*h/t);let M=t*4,N=new Uint8ClampedArray(M*r);for(v=0;v<r;v++)for(_=0;_<t;_++){for(y=b=x=0,g=0;g<p;g++)for(C=A[g*r+v],h=0;h<s;h++)S=j[h*t+_]*C,w=(h+g*s)*3,y+=O[w]*S,b+=O[w+1]*S,x+=O[w+2]*S;T=4*_+v*M,N[T]=l(y),N[T+1]=l(b),N[T+2]=l(x),N[T+3]=255}return N}
/**
* Encodes an RGBA image to a PNG data URI. RGB should not be premultiplied by A.
*
* @remarks
* This is optimized for speed and simplicity and does not optimize for size
* at all. This does not do any compression (all values are stored uncompressed).
*
* @see https://github.com/evanw/thumbhash
* @author Evan Wallace
* @license MIT
*/
function m(e,t,n){let r=e*4+1,i=6+t*(5+r),a=[137,80,78,71,13,10,26,10,0,0,0,13,73,72,68,82,0,0,e>>8,e&255,0,0,t>>8,t&255,8,6,0,0,0,0,0,0,0,i>>>24,i>>16&255,i>>8&255,i&255,73,68,65,84,120,1],o=[0,498536548,997073096,651767980,1994146192,1802195444,1303535960,1342533948,-306674912,-267414716,-690576408,-882789492,-1687895376,-2032938284,-1609899400,-1111625188],s=1,c=0;for(let e=0,i=0,o=r-1;e<t;e++,o+=r-1)for(a.push(e+1<t?0:1,r&255,r>>8,~r&255,r>>8^255,0),c=(c+s)%65521;i<o;i++){let e=n[i]&255;a.push(e),s=(s+e)%65521,c=(c+s)%65521}a.push(c>>8,c&255,s>>8,s&255,0,0,0,0,0,0,0,0,73,69,78,68,174,66,96,130);for(let[e,t]of[[12,29],[37,41+i]]){let n=-1;for(let r=e;r<t;r++)n^=a[r],n=n>>>4^o[n&15],n=n>>>4^o[n&15];n=~n,a[t++]=n>>>24,a[t++]=n>>16&255,a[t++]=n>>8&255,a[t++]=n&255}return`data:image/png;base64,${globalThis.btoa(String.fromCharCode(...a))}`}let h=!(typeof window>`u`)&&(!(`onscroll`in window)||/(?:gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent));function g(e,t=document){return typeof e==`string`?[...t.querySelectorAll(e)]:e instanceof Element?[e]:[...e]}function _(e){let t=Date.now();return`data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E`.replace(/\s/,` data-id='${t}-${e}' `)}function v(e,t){let n;return function(...r){n!=null&&clearTimeout(n),n=setTimeout(()=>{e(...r),n=void 0},t)}}function y(e,{ratio:t=1,size:n=32}={}){let{width:r,height:i}=b(t,n);return m(r,i,p(e,r,i))}function b(e,t){let n=e>=1;return{width:n?t:Math.round(t*e),height:n?Math.round(t/e):t}}let x=!1;function S(){if(!x){x=!0;try{new PerformanceObserver(e=>{for(let t of e.getEntries()){let e=t.element;if(!e||e.tagName!==`IMG`)continue;let n=e.loading===`lazy`,r=e.hasAttribute(`data-src`)||e.hasAttribute(`data-srcset`);(n||r)&&console.warn('[unlazy] LCP element is configured for lazy loading. Set `loading="eager"` to improve Largest Contentful Paint.',e)}}).observe({type:`largest-contentful-paint`,buffered:!0})}catch{}}}function C(e){let{PI:t,min:n,max:r,cos:i,round:a}=Math,o=e[0]|e[1]<<8|e[2]<<16,s=e[3]|e[4]<<8,c=(o&63)/63,l=(o>>6&63)/31.5-1,u=(o>>12&63)/31.5-1,d=(o>>18&31)/31,f=o>>23,p=(s>>3&63)/63,m=(s>>9&63)/63,h=s>>15,g=r(3,h?f?5:7:s&7),_=r(3,h?s&7:f?5:7),v=f?(e[5]&15)/15:1,y=(e[5]>>4)/15,b=f?6:5,x=0,S=(t,n,r)=>{let i=[];for(let a=0;a<n;a++)for(let o=+!a;o*n<t*(n-a);o++)i.push(((e[b+(x>>1)]>>((x++&1)<<2)&15)/7.5-1)*r);return i},C=S(g,_,d),T=S(3,3,p*1.25),E=S(3,3,m*1.25),D=f&&S(5,5,y),O=w(e),k=a(O>1?32:32*O),A=a(O>1?32/O:32),j=new Uint8Array(k*A*4),M=[],N=[];for(let e=0,a=0;e<A;e++)for(let o=0;o<k;o++,a+=4){let s=c,d=l,p=u,m=v;for(let e=0,n=r(g,f?5:3);e<n;e++)M[e]=i(t/k*(o+.5)*e);for(let n=0,a=r(_,f?5:3);n<a;n++)N[n]=i(t/A*(e+.5)*n);for(let e=0,t=0;e<_;e++)for(let n=+!e,r=N[e]*2;n*_<g*(_-e);n++,t++)s+=C[t]*M[n]*r;for(let e=0,t=0;e<3;e++)for(let n=+!e,r=N[e]*2;n<3-e;n++,t++){let e=M[n]*r;d+=T[t]*e,p+=E[t]*e}if(f)for(let e=0,t=0;e<5;e++)for(let n=+!e,r=N[e]*2;n<5-e;n++,t++)m+=D[t]*M[n]*r;let h=s-2/3*d,y=(3*s-h+p)/2,b=y-p;j[a]=r(0,255*n(1,y)),j[a+1]=r(0,255*n(1,b)),j[a+2]=r(0,255*n(1,h)),j[a+3]=r(0,255*n(1,m))}return{w:k,h:A,rgba:j}}function w(e){let t=e[3],n=e[2]&128,r=e[4]&128;return(r?n?5:7:t&7)/(r?t&7:n?5:7)}function T(e){let{w:t,h:n,rgba:r}=C(E(e));return m(t,n,r)}function E(e){return Uint8Array.from(globalThis.atob(D(e)),e=>e.charCodeAt(0))}function D(e){return e.replaceAll(`-`,`+`).replaceAll(`_`,`/`)}let O=new WeakSet;function k(e=`img[loading="lazy"], img[loading="eager"][data-src], img[loading="eager"][data-srcset]`,{hash:t=!0,hashType:n=`blurhash`,placeholderSize:r=32,updateSizesOnResize:i=!1,onImageLoad:a,onImageError:o}={}){let s=new Set;(typeof __UNLAZY_LOGGING__>`u`||__UNLAZY_LOGGING__)&&S();for(let[c,l]of g(e).entries()){if(O.has(l))continue;let e=l.loading===`eager`;if(e&&!l.hasAttribute(`fetchpriority`)&&l.setAttribute(`fetchpriority`,`high`),s.add(A(l,{updateOnResize:i})),t){let e=M({image:l,hash:typeof t==`string`?t:void 0,hashType:n,size:r});e&&(l.src=e)}if(!l.dataset.src&&!l.dataset.srcset){(typeof __UNLAZY_LOGGING__>`u`||__UNLAZY_LOGGING__)&&console.error("[unlazy] Missing `data-src` or `data-srcset` attribute",l);continue}if(O.add(l),e||h){if(a){let e=()=>a(l);l.addEventListener(`load`,e,{once:!0}),s.add(()=>l.removeEventListener(`load`,e))}if(o){let e=e=>o(l,e);l.addEventListener(`error`,e,{once:!0}),s.add(()=>l.removeEventListener(`error`,e))}R(l),L(l,`srcset`),L(l,`src`);continue}if(l.src||=_(c),l.complete&&l.naturalWidth>0){s.add(j(l,{onImageLoad:a,onImageError:o}));continue}let u=()=>{s.add(j(l,{onImageLoad:a,onImageError:o}))};l.addEventListener(`load`,u,{once:!0}),s.add(()=>l.removeEventListener(`load`,u))}return()=>{for(let e of s)e();s.clear()}}function A(e=`img[data-sizes="auto"], source[data-sizes="auto"]`,{updateOnResize:t=!1}={}){let n=[];for(let r of g(e))n.push(N(r,t));return()=>{for(let e of n)e();n.length=0}}function j(e,{onImageLoad:t,onImageError:n}={}){let r=[],i=()=>{for(let e of r)e();r.length=0};if(B(e)){if(t){let n=()=>t(e);e.addEventListener(`load`,n,{once:!0}),r.push(()=>e.removeEventListener(`load`,n))}if(n){let t=t=>n(e,t);e.addEventListener(`error`,t,{once:!0}),r.push(()=>e.removeEventListener(`error`,t))}return R(e),L(e,`srcset`),L(e,`src`),i}let{srcset:a,src:o,sizes:s}=e.dataset;if(!a&&!o)return i;let c=new Image,l=()=>{L(e,`srcset`),L(e,`src`),t?.(e)},u=t=>{e.dispatchEvent(new Event(`error`)),n?.(e,t)};if(c.addEventListener(`load`,l,{once:!0}),c.addEventListener(`error`,u,{once:!0}),r.push(()=>{c.removeEventListener(`load`,l),c.removeEventListener(`error`,u),c.src=``}),s===`auto`){let t=z(e);t&&(c.sizes=`${t}px`)}else e.sizes&&(c.sizes=e.sizes);return a&&(c.srcset=a),o&&(c.src=o),i}function M({image:e,hash:t,hashType:n=`blurhash`,size:r=32,ratio:i}={}){if(e&&!t){let{blurhash:r,thumbhash:i}=e.dataset;t=i||r,n=i?`thumbhash`:`blurhash`}if(t)try{return n===`blurhash`?(e&&!i&&(i=(e.width||e.offsetWidth||r)/(e.height||e.offsetHeight||r)),y(t,{ratio:i,size:r})):T(t)}catch(e){(typeof __UNLAZY_LOGGING__>`u`||__UNLAZY_LOGGING__)&&console.error(`[unlazy] Failed to generate ${n} placeholder:`,e)}}function N(e,t){let n=F(e);for(let e of n)I(e);if(!t||!n.some(P))return V;let r=e instanceof HTMLImageElement?e:e.parentElement?.getElementsByTagName(`img`)[0]??null;if(!r)return V;let i=v(()=>{for(let t of F(e))I(t)},500),a=new ResizeObserver(i);return a.observe(r),()=>a.disconnect()}function P(e){return e.dataset.sizes===`auto`}function F(e){let t=[e];if(e instanceof HTMLImageElement&&e.parentElement?.tagName.toLowerCase()===`picture`)for(let n of e.parentElement.querySelectorAll(`source[data-sizes="auto"]`))t.push(n);return t}function I(e){if(e.dataset.sizes!==`auto`)return;let t=z(e);if(!t)return;let n=`${t}px`;e.sizes!==n&&(e.sizes=n)}function L(e,t){let n=e.dataset[t];n&&(e[t]=n,e.removeAttribute(`data-${t}`))}function R(e){let t=e.parentElement;if(t?.tagName.toLowerCase()===`picture`)for(let e of t.querySelectorAll(`source[data-srcset]`))I(e),L(e,`srcset`)}function z(e){return e instanceof HTMLSourceElement?e.parentElement?.getElementsByTagName(`img`)[0]?.offsetWidth:e.offsetWidth}function B(e){return e.parentElement?.tagName.toLowerCase()===`picture`}function V(){}return document.currentScript?.hasAttribute(`init`)&&k(),e.autoSizes=A,e.lazyLoad=k,e.triggerLoad=j,e})({});