trying and half-failing to get image preloading to work lol

web/src/components/photos/carousel.astro

@@ -1,6 +1,5 @@
 ---
 import { authPB } from "src/utils/pocketbase";
-import type { RecordModel } from 'pocketbase'
 
 // export const prerender = false
 
@@ -8,6 +7,10 @@ const pb = await authPB()
 const photos = await pb.collection('photos').getFullList({
     sort: '-created'
 })
+
+const photoLinks = await Promise.all(
+    photos.map(p => pb.files.getURL(p, p.image))
+)
 ---
 
 <script>
@@ -18,6 +21,8 @@ const photos = await pb.collection('photos').getFullList({
 
     const dataElement = document.getElementById('carousel-data');
     const photos = dataElement ? JSON.parse(dataElement.textContent || '[]') : [];
+    const photoLinksElement = document.getElementById('photo-links-data');
+    const photoLinks = photoLinksElement ? JSON.parse(photoLinksElement.textContent || '[]') : [];
     const titleEl = document.getElementById('photo-title');
     const cameraEl = document.getElementById('photo-camera');
     const locationEl = document.getElementById('photo-location');
@@ -31,13 +36,23 @@ const photos = await pb.collection('photos').getFullList({
         currentPosIndicator.innerText = '1';
     }
 
+    function preloadImages() {
+        photoLinks.forEach((url: string) => {
+            const preloadImg = new Image();
+            preloadImg.src = url;
+        });
+    }
+    
+    // Call preload on page load
+    preloadImages();
+
     const swiper = new Swiper('.swiper', {
         modules: [Navigation, Keyboard, EffectFade],
         effect: 'cards',
         fadeEffect: {
             crossFade: true
         },
-        speed: 400,
+        speed: 250,
         navigation: {
             nextEl: '#inc-button',
             prevEl: '#dec-button',
@@ -72,13 +87,14 @@ const photos = await pb.collection('photos').getFullList({
 
 <!-- Hidden element to pass server data to client -->
 <div class="hidden" id="carousel-data">{JSON.stringify(photos)}</div>
+<div class="hidden" id="photo-links-data">{JSON.stringify(photoLinks)}</div>
 
 <div class="swiper w-full h-[60vh] md:h-[calc(100vh-7rem)]">
     <div class="swiper-wrapper">
-        {photos.map((photo) => (
+        {photos.map((photo, i) => (
             <div class="swiper-slide flex items-center justify-center">
                 <img 
-                    src={pb.files.getURL(photo, photo.image)} 
+                    src={photoLinks[i]} 
                     class="w-full h-full object-contain"
                     alt={photo.title || 'Photo'}
                 />

web/src/pages/photos/index.astro

@@ -20,10 +20,6 @@ const photos = await pb.collection('photos').getFullList({
         <!-- <button id="dec-button" onclick="dec()">&lt;</button> -->
         <span id="current-pos" /> of <span id="max-pos" />
         <!-- <button id="inc-button" onclick="inc()">&gt;</button> -->
-
-
-        <!-- <p class="text-2xl">Photography :)</p>
-        <p class="text-left">Chuck me an email if you'd like a print of these, I'll see what I can do</p> -->
     </div>
     
     <div slot="content" class="">