refactor image loading

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",
   ],
   <IndexPage />,
   "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",
-  ],
+  [],
   // <IndexPage />,
   <p>There Should Be Red Pandas!</p>,
   "out/images/index.html"

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();
+};

src/static/populate_index.js

@@ -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();
-};

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);
+  });
+}

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: {
       }`}
     >
       <div
-        id={`placeholder__image-${props.idx}-loader`}
+        data-type="placeholder__image__loader"
         className="w-full h-full absolute inset-0 bg-gray-400 opacity-30 animate-pulse z-[3]"
       ></div>
     </a>

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 <Placeholder key={`placeholder__image-${idx}`} idx={idx} isMobileHidden={idx > 5} />;
+        {[...Array(7).keys()].map((idx) => {
+          return <Placeholder key={`placeholder__image-${idx}`} isMobileHidden={idx > 4} />;
         })}
         <AllLink location="/images/" text="View All Images" />
       </div>