+1 -1

public/jxl.min.js

reviewed

··· 1 1 - !function(){"use strict";let e={useCache:!0,imageType:"jpeg"},a,t={};function s(s,i,n,r){let l=s.dataset.jxlSrc;if(i instanceof Blob)c(s,URL.createObjectURL(i),n,r);else if("OffscreenCanvas"in window){let d=new OffscreenCanvas(i.width,i.height);t[l].postMessage({canvas:d,imgData:i,imageType:e.imageType},[d]),t[l].addEventListener("message",t=>{t.data.url&&t.data.blob&&(c(s,t.data.url,n,r),e.useCache&&a&&a.put(l,new Response(t.data.blob)))})}else{let g=document.createElement("canvas");g.width=i.width,g.height=i.height,g.getContext("2d").putImageData(i,0,0),g.toBlob(t=>{c(s,URL.createObjectURL(t),n,r),e.useCache&&a&&a.put(l,new Response(t))},"image/"+e.imageType)}}function c(a,t,s,c){s?a.style.backgroundImage='url("'+t+'")':c?(a.srcset=t,a.type="image/"+e.imageType):a.src=t}async function i(c,i,n){let r=c.dataset.jxlSrc=i?getComputedStyle(c).backgroundImage.slice(5,-2):n?c.srcset:c.currentSrc;if(i||n||(c.srcset="",c.src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="),e.useCache){try{a=a||await caches.open("jxl")}catch(l){}let d=a&&await a.match(r);if(d){let g=await d.blob();requestAnimationFrame(()=>s(c,g,i,n));return}}let o=await fetch(r),u=await o.arrayBuffer();t[r]=new Worker("jxl_dec.js"),t[r].postMessage({jxlSrc:r,image:u}),t[r].addEventListener("message",e=>e.data.imgData&&requestAnimationFrame(()=>s(c,e.data.imgData,i,n)))}new MutationObserver(e=>e.forEach(e=>e.addedNodes.forEach(e=>{e instanceof HTMLImageElement&&e.src.endsWith(".jxl")?e.onerror=()=>i(e,!1,!1):e instanceof HTMLSourceElement&&e.srcset.endsWith(".jxl")?i(e,!1,!0):e instanceof Element&&getComputedStyle(e).backgroundImage.endsWith('.jxl")')&&i(e,!0,!1)}))).observe(document.documentElement,{subtree:!0,childList:!0})}(); 1 1 + !function(){"use strict";let e={useCache:!0,imageType:"png"},a,t={};function s(s,i,n,r){let l=s.dataset.jxlSrc;if(i instanceof Blob)c(s,URL.createObjectURL(i),n,r);else if("OffscreenCanvas"in window){let d=new OffscreenCanvas(i.width,i.height);t[l].postMessage({canvas:d,imgData:i,imageType:e.imageType},[d]),t[l].addEventListener("message",t=>{t.data.url&&t.data.blob&&(c(s,t.data.url,n,r),e.useCache&&a&&a.put(l,new Response(t.data.blob)))})}else{let g=document.createElement("canvas");g.width=i.width,g.height=i.height,g.getContext("2d").putImageData(i,0,0),g.toBlob(t=>{c(s,URL.createObjectURL(t),n,r),e.useCache&&a&&a.put(l,new Response(t))},"image/"+e.imageType)}}function c(a,t,s,c){s?a.style.backgroundImage='url("'+t+'")':c?(a.srcset=t,a.type="image/"+e.imageType):a.src=t}async function i(c,i,n){let r=c.dataset.jxlSrc=i?getComputedStyle(c).backgroundImage.slice(5,-2):n?c.srcset:c.currentSrc;if(i||n||(c.srcset="",c.src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="),e.useCache){try{a=a||await caches.open("jxl")}catch(l){}let d=a&&await a.match(r);if(d){let g=await d.blob();requestAnimationFrame(()=>s(c,g,i,n));return}}let o=await fetch(r),u=await o.arrayBuffer();t[r]=new Worker("https://aria.coffee/jxl_dec.js"),t[r].postMessage({jxlSrc:r,image:u}),t[r].addEventListener("message",e=>e.data.imgData&&requestAnimationFrame(()=>s(c,e.data.imgData,i,n)))}new MutationObserver(e=>e.forEach(e=>e.addedNodes.forEach(e=>{e instanceof HTMLImageElement&&e.src.endsWith(".jxl")?e.onerror=()=>i(e,!1,!1):e instanceof HTMLSourceElement&&e.srcset.endsWith(".jxl")?i(e,!1,!0):e instanceof Element&&getComputedStyle(e).backgroundImage.endsWith('.jxl")')&&i(e,!0,!1)}))).observe(document.documentElement,{subtree:!0,childList:!0})}();

+3 -3

src/components/jxl-loader.astro

reviewed

··· 1 1 - <link rel="prefetch" href="/jxl_dec.js" fetchpriority="high"> 2 2 - <link rel="prefetch" href="/jxl_dec.wasm" fetchpriority="high"> 3 3 - <script src="/jxl.min.js" type="text/javascript"></script> 1 1 + <link rel="prefetch" href="https://aria.coffee/jxl_dec.js" fetchpriority="high"> 2 2 + <link rel="prefetch" href="https://aria.coffee/jxl_dec.wasm" fetchpriority="high"> 3 3 + <script src="https://aria.coffee/jxl.min.js" type="text/javascript"></script>