From 889c8c0d373e2568b4dc8f54a962985f020f7302 Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Fri, 31 Jan 2025 23:22:19 +0500 Subject: [PATCH] refactor image loading --- src/build.tsx | 13 +++-- src/static/populateIndex.js | 40 ++++++++++++++ src/static/populate_index.js | 66 ------------------------ src/static/renderImages.js | 37 +++++++++++++ src/templates/Components/PlaceHolder.tsx | 3 +- src/templates/index.tsx | 4 +- 6 files changed, 86 insertions(+), 77 deletions(-) create mode 100644 src/static/populateIndex.js delete mode 100644 src/static/populate_index.js create mode 100644 src/static/renderImages.js diff --git a/src/build.tsx b/src/build.tsx index 90e4998..bb874fa 100644 --- a/src/build.tsx +++ b/src/build.tsx @@ -200,8 +200,11 @@ generateHTMLFile( } Videos | ${images.length + videos.length} Total`, [ environment == "dev" - ? "/static/populate_index.js" - : "/static/populate_index.min.js", + ? "/static/renderImages.js" + : "/static/renderImages.min.js", + environment == "dev" + ? "/static/populateIndex.js" + : "/static/populateIndex.min.js", ], , "out/index.html" @@ -211,11 +214,7 @@ generateHTMLFile( "Wah-Collection/Images", "/images/", `Image page of Wah-Collection | ${images.length} Images`, - [ - // environment == "dev" - // ? "/static/populate_index.js" - // : "/static/populate_index.min.js", - ], + [], // ,

There Should Be Red Pandas!

, "out/images/index.html" diff --git a/src/static/populateIndex.js b/src/static/populateIndex.js new file mode 100644 index 0000000..e83fc9e --- /dev/null +++ b/src/static/populateIndex.js @@ -0,0 +1,40 @@ +function randomElements(src, count) { + let result = []; + const max = src.length - 1; + for (let i = 0; i < count; i++) { + const idx = Math.floor(Math.random() * max); + result.push({ + src: src[idx], + id: idx, + }); + } + return result; +} + +async function populateIndex() { + let config = await get("/data/config.json"); + let images = await get("/data/images.json"); + // let videos = await get("/data/videos.json"); + + const Images = document.querySelectorAll('[data-type="placeholder__image"]'); + const VisibleImages = []; + Images.forEach((placeholder) => { + if (placeholder.checkVisibility()) { + VisibleImages.push(placeholder); + } + }); + + randomElements(images, VisibleImages.length).forEach((image, idx) => { + renderImage( + config.endpoint, + config.bucket, + config.prefix, + image.src, + image.id, + VisibleImages[idx] + ); + }); +} +window.onload = () => { + populateIndex(); +}; diff --git a/src/static/populate_index.js b/src/static/populate_index.js deleted file mode 100644 index b6d2ffe..0000000 --- a/src/static/populate_index.js +++ /dev/null @@ -1,66 +0,0 @@ -async function get(url) { - const res = await fetch(url); - if (!res.ok) { - throw new Error(`Failed to fetch ${url}`); - } - return await res.json(); -} - -function randomElements(src, count) { - let result = []; - const max = src.length - 1; - for (let i = 0; i < count; i++) { - const idx = Math.floor(Math.random() * max); - result.push({ - src: src[idx], - id: idx, - }); - } - return result; -} - -async function FetchData() { - let config = await get("/data/config.json"); - let images = await get("/data/images.json"); - // let videos = await get("/data/videos.json"); - - const Images = document.querySelectorAll( - '[data-type="placeholder__image"]' - ); - const VisibleImages = []; - Images.forEach((placeholder) => { - if (placeholder.checkVisibility()) { - VisibleImages.push(placeholder); - } - }); - - randomElements(images, VisibleImages.length).forEach((image, idx) => { - const src = `${config.endpoint}/${config.bucket}/${config.prefix}/${image.src}`; - const loader = document.getElementById( - `placeholder__image-${idx + 1}-loader` - ); - const blurImg = document.createElement("img"); - const Img = document.createElement("img"); - blurImg.src = `https://wsrv.nl/?url=${encodeURI(src)}&w=16&h=16`; - blurImg.className = "object-cover w-full h-full absolute inset-0"; - Img.src = `https://wsrv.nl/?url=${encodeURI(src)}&w=256&h=256`; - Img.srcset = `https://wsrv.nl/?url=${encodeURI(src)}&w=256&h=256 256w, https://wsrv.nl/?url=${encodeURI(src)}&w=512&h=512 512w`; - Img.sizes = `(max-width: 600px) 256px, 512px`; - Img.className = "invisible object-cover w-full h-full absolute inset-0"; - - VisibleImages[idx].appendChild(blurImg); - VisibleImages[idx].appendChild(Img); - - Img.addEventListener("load", () => { - Img.classList.remove("invisible"); - blurImg.remove(); - loader.remove(); - VisibleImages[idx].href = `/image/?id=${image.id}`; - // VisibleImages[idx].href = `/image/?name=${encodeURI(image.split("/")[image.split("/").length - 1])}`; - Img.removeEventListener("load", this); - }); - }); -} -window.onload = () => { - FetchData(); -}; diff --git a/src/static/renderImages.js b/src/static/renderImages.js new file mode 100644 index 0000000..1a1bd53 --- /dev/null +++ b/src/static/renderImages.js @@ -0,0 +1,37 @@ +async function get(url) { + const res = await fetch(url); + if (!res.ok) { + throw new Error(`Failed to fetch ${url}`); + } + return await res.json(); +} + +function renderImage(endpoint, bucket, prefix, isrc, iid, placeholder) { + const src = `${endpoint}/${bucket}/${prefix}/${isrc}`; + const loader = placeholder.querySelector( + '[data-type="placeholder__image__loader"]' + ); + const blurImg = document.createElement("img"); + const Img = document.createElement("img"); + blurImg.src = `https://wsrv.nl/?url=${encodeURI(src)}&w=16&h=16`; + blurImg.className = "object-cover w-full h-full absolute inset-0"; + blurImg.loading = "lazy"; + Img.src = `https://wsrv.nl/?url=${encodeURI(src)}&w=256&h=256`; + Img.srcset = `https://wsrv.nl/?url=${encodeURI( + src + )}&w=256&h=256 256w, https://wsrv.nl/?url=${encodeURI(src)}&w=512&h=512 512w`; + Img.sizes = `(max-width: 600px) 256px, 512px`; + Img.className = "invisible object-cover w-full h-full absolute inset-0"; + Img.loading = "lazy"; + + placeholder.appendChild(blurImg); + placeholder.appendChild(Img); + + Img.addEventListener("load", () => { + Img.classList.remove("invisible"); + blurImg.remove(); + loader.remove(); + placeholder.href = `/image/?id=${iid}`; + Img.removeEventListener("load", this); + }); +} diff --git a/src/templates/Components/PlaceHolder.tsx b/src/templates/Components/PlaceHolder.tsx index 59603aa..d88522a 100644 --- a/src/templates/Components/PlaceHolder.tsx +++ b/src/templates/Components/PlaceHolder.tsx @@ -1,5 +1,4 @@ export default function Placeholder(props: { - idx: string | number; isMobileHidden?: boolean; }) { return ( @@ -10,7 +9,7 @@ export default function Placeholder(props: { }`} >
diff --git a/src/templates/index.tsx b/src/templates/index.tsx index 6fc82ac..e068b29 100644 --- a/src/templates/index.tsx +++ b/src/templates/index.tsx @@ -9,8 +9,8 @@ export default function IndexPage() { id="index_images" className="mt-4 flex overflow-x-auto sm:overflow-x-hidden sm:grid sm:grid-cols-[repeat(auto-fill,minmax(25%,1fr))] xl:grid-cols-[repeat(auto-fill,minmax(20%,1fr))] sm:items-center sm:justify-center gap-4" > - {[1, 2, 3, 4, 5, 6, 7].map((idx) => { - return 5} />; + {[...Array(7).keys()].map((idx) => { + return 4} />; })}