From 93b7c5e7c707c37251480cb7e92a507428ce810d Mon Sep 17 00:00:00 2001
From: BOTAlex <zhentao2004@gmail.com>
Date: Sat, 10 May 2025 20:53:02 +0200
Subject: [PATCH] slightly better bloat loading

---
 src/routes/baller/+page.svelte | 64 ++++++++++++++++++++++++++++++++++
 src/routes/test/+page.svelte   | 53 ----------------------------
 2 files changed, 64 insertions(+), 53 deletions(-)
 create mode 100644 src/routes/baller/+page.svelte
 delete mode 100644 src/routes/test/+page.svelte

diff --git a/src/routes/baller/+page.svelte b/src/routes/baller/+page.svelte
new file mode 100644
index 0000000..d07f396
--- /dev/null
+++ b/src/routes/baller/+page.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+
+  let scrollY = 0;
+
+  const animateInterval = 16;
+  const startMove = 64;
+  const numFrames = 312;
+
+  let framesLoaded = 1;
+  let ballsLoaded = 0;
+  let frameLoader: HTMLImageElement;
+  let frameLoader2: HTMLImageElement;
+  let frameLoader3: HTMLImageElement;
+  let frameLoader4: HTMLImageElement;
+
+  onMount(()=>{
+
+    // Force load once
+    ballsLoaded = 4;
+    onLoaded();
+  });
+
+  function onLoaded (){
+    ballsLoaded++;
+    if (ballsLoaded > 3) {
+        frameLoader.src = "/images/spinning_cat/untitled_" + framesLoaded.toString().padStart(5, '0') + ".png";
+        framesLoaded++;
+        frameLoader2.src = "/images/spinning_cat/untitled_" + framesLoaded.toString().padStart(5, '0') + ".png";
+        framesLoaded++;
+        frameLoader3.src = "/images/spinning_cat/untitled_" + framesLoaded.toString().padStart(5, '0') + ".png";
+        framesLoaded++;
+        frameLoader4.src = "/images/spinning_cat/untitled_" + framesLoaded.toString().padStart(5, '0') + ".png";
+        framesLoaded++;
+        ballsLoaded = 0;
+    }
+  }
+
+  let frameIndex = 0;
+  $: frameIndex = Math.min(Math.floor(Math.max(scrollY-startMove, 0) / animateInterval+1), numFrames);
+</script>
+
+<svelte:window bind:scrollY />
+
+<div class="w-full flex justify-center" style="height: 5000px;">
+    <!-- Image Loader -->
+    <img on:load={()=>{onLoaded()}} bind:this={frameLoader} style="height: 0.01px; width: 0.01px;" class="" src="/images/spinning_cat/untitled_00001.png" alt="">
+    <img on:load={()=>{onLoaded()}} bind:this={frameLoader2} style="height: 0.01px; width: 0.01px;" class="" src="/images/spinning_cat/untitled_00001.png" alt="">
+    <img on:load={()=>{onLoaded()}} bind:this={frameLoader3} style="height: 0.01px; width: 0.01px;" class="" src="/images/spinning_cat/untitled_00001.png" alt="">
+    <img on:load={()=>{onLoaded()}} bind:this={frameLoader4} style="height: 0.01px; width: 0.01px;" class="" src="/images/spinning_cat/untitled_00001.png" alt="">
+
+    <!-- add "top-0" so it sticks at the top -->
+    <div class="sticky top-0" style="width: 200px; height: 200px;">
+        <div class="flex justify-center items-center" style="width: 200px; height: 200px;">
+            <img src="/images/spinning_cat/untitled_{frameIndex.toString().padStart(5, '0')}.png" class="object-contain w-full h-full" alt="">
+        </div>
+        <div>{frameIndex}</div>
+        
+    </div>
+</div>
+
+<div class="h-[1000px] bg-amber-700 w-full">
+
+</div>
\ No newline at end of file
diff --git a/src/routes/test/+page.svelte b/src/routes/test/+page.svelte
deleted file mode 100644
index 09b8b82..0000000
--- a/src/routes/test/+page.svelte
+++ /dev/null
@@ -1,53 +0,0 @@
-<script lang="ts">
-    import { onMount } from "svelte";
-
-  let scrollY = 0;
-
-  const animateInterval = 16;
-  const startMove = 64;
-  const numFrames = 312;
-
-  let framesLoaded = 1;
-  let frameLoader: HTMLImageElement;
-  let frameLoader2: HTMLImageElement;
-  let loadingInterval: number | undefined;
-
-  onMount(()=>{
-    setTimeout(() => {
-        loadingInterval = setInterval(()=>{
-            frameLoader.src = "/images/spinning_cat/untitled_" + framesLoaded.toString().padStart(5, '0') + ".png";
-            framesLoaded++;
-            frameLoader2.src = "/images/spinning_cat/untitled_" + framesLoaded.toString().padStart(5, '0') + ".png";
-            framesLoaded++;
-
-            if (framesLoaded >= numFrames) {
-                clearInterval(loadingInterval);
-            }
-        }, 5);
-    }, 200);
-  });
-
-  let frameIndex = 0;
-  $: frameIndex = Math.min(Math.floor(Math.max(scrollY-startMove, 0) / animateInterval+1), numFrames);
-</script>
-
-<svelte:window bind:scrollY />
-
-<div class="w-full flex justify-center" style="height: 5000px;">
-    <!-- Image Loader -->
-    <img bind:this={frameLoader} style="height: 0.01px; width: 0.01px;" class="" src="/images/spinning_cat/untitled_00001.png" alt="">
-    <img bind:this={frameLoader2} style="height: 0.01px; width: 0.01px;" class="" src="/images/spinning_cat/untitled_00001.png" alt="">
-
-    <!-- add "top-0" so it sticks at the top -->
-    <div class="sticky top-0" style="width: 200px; height: 200px;">
-        <div class="flex justify-center items-center" style="width: 200px; height: 200px;">
-            <img src="/images/spinning_cat/untitled_{frameIndex.toString().padStart(5, '0')}.png" class="object-contain w-full h-full" alt="">
-        </div>
-        <div>{frameIndex}</div>
-        
-    </div>
-</div>
-
-<div class="h-[1000px] bg-amber-700 w-full">
-
-</div>
\ No newline at end of file