preload images

GitPaulo · Aug 12, 2024 · e03b9d1 · e03b9d1
1 parent ad9351a
commit e03b9d1
Show file tree

Hide file tree

Showing 14 changed files with 12 additions and 14 deletions.
diff --git a/src/app.html b/src/app.html
@@ -5,6 +5,14 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%sveltekit.assets%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <!-- Preload backgrounds -->
+    <link rel="preload" href="background_arealmreborn.webp" as="image" />
+    <link rel="preload" href="background_heavensward.webp" as="image" />
+    <link rel="preload" href="background_stormblood.webp" as="image" />
+    <link rel="preload" href="background_shadowbringers.webp" as="image" />
+    <link rel="preload" href="background_endwalker.webp" as="image" />
+    <link rel="preload" href="background_dawntrail.webp" as="image" />
+    <!-- Head -->
     %sveltekit.head%
   </head>
   <body class="flex flex-col mt-8" data-sveltekit-preload-data="hover">
@@ -13,12 +21,8 @@
       <div class="content-container">%sveltekit.body%</div>
     </div>
   </body>
-  <div
-    id="footer"
-    class="text-sm mt-1 md:mt-4 text-gray-400"
-    style="display: block"
-  >
-    <div id="foot-text" class="hidden md:block">
+  <div id="footer" class="text-sm mt-1 md:mt-4 text-gray-400">
+    <div id="copyright" class="hidden md:block">
       FINAL FANTASY is a registered trademark of Square Enix Holdings Co., Ltd.
       <br />
       FINAL FANTASY XIV © SQUARE ENIX CO., LTD.
@@ -29,7 +33,7 @@
       target="_blank"
       rel="noopener noreferrer"
       title="GitHub.com/GitPaulo/FFXIV-Journey"
-      class="text-sm text-gray-500 flex items-center space-x-2 mt-2 flex items-center justify-center"
+      class="text-sm text-gray-500 flex items-center space-x-2 mt-2 justify-center"
     >
       <svg
         viewBox="0 0 98 96"

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -100,7 +100,7 @@
   // Update the background image based on the current expansion
   function updateBackground() {
     const bgImage = $currentExpansion
-      ? `${base}/background_${$currentExpansion.replace(/\s/g, "").toLowerCase()}.jpg`
+      ? `${base}/background_${$currentExpansion.replace(/\s/g, "").toLowerCase()}.webp`
       : ""; // No background is default
 
     const bgElement = document.getElementById("background");
@@ -137,7 +137,6 @@
       searchInput?.focus();
     }
   };
-
   window.addEventListener("keydown", handleKeydown);
 
   // Initialize the quests data and state
@@ -151,11 +150,6 @@
       updateCurrentExpansion();
       updateBackground();
       setTimeout(() => loading.set(false), 350);
-
-      const footer = document.getElementById("footer");
-      if (footer) {
-        footer.style.display = "block";
-      }
     });
   }
 

diff --git a/static/background_arealmreborn.jpg b/static/background_arealmreborn.jpg
diff --git a/static/background_arealmreborn.webp b/static/background_arealmreborn.webp
diff --git a/static/background_dawntrail.jpg b/static/background_dawntrail.jpg
diff --git a/static/background_dawntrail.webp b/static/background_dawntrail.webp
diff --git a/static/background_endwalker.jpg b/static/background_endwalker.jpg
diff --git a/static/background_endwalker.webp b/static/background_endwalker.webp
diff --git a/static/background_heavensward.jpg b/static/background_heavensward.jpg
diff --git a/static/background_heavensward.webp b/static/background_heavensward.webp
diff --git a/static/background_shadowbringers.jpg b/static/background_shadowbringers.jpg
diff --git a/static/background_shadowbringers.webp b/static/background_shadowbringers.webp
diff --git a/static/background_stormblood.jpg b/static/background_stormblood.jpg
diff --git a/static/background_stormblood.webp b/static/background_stormblood.webp