From 8da38befe1af59d7f282a94bd8db79d315aa8296 Mon Sep 17 00:00:00 2001
From: afn <hey@afn.lol>
Date: Sun, 26 Mar 2023 19:13:28 -0400
Subject: [PATCH] feat: preload images with css hack

---
 src/routes/poll/+page.svelte | 27 ++++++++++++++++++++-------
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/routes/poll/+page.svelte b/src/routes/poll/+page.svelte
index f8145b8..84f5366 100644
--- a/src/routes/poll/+page.svelte
+++ b/src/routes/poll/+page.svelte
@@ -82,17 +82,30 @@
 			logos[i] = logos[j];
 			logos[j] = k;
 		}
-
-		function preloadImage(url: string) {
-			let img = new Image();
-			img.src = url;
-		}
-
+		
+		let content = ''
 		logos.forEach((variants) => {
 			variants.forEach((variant) =>
-				preloadImage(variant.optimized_direct_url ?? variant.logo_direct_url)
+				content += `url(${variant.optimized_direct_url ?? variant.logo_direct_url}) `
 			);
 		});
+		
+		// can't use inline styles with ::after so here's this hack for a hack
+		let style = `
+			.wrapper::after {
+				position: absolute; 
+				width: 0; 
+				height: 0; 
+				overflow: hidden; 
+				z-index: -1;
+				content: ${content}; 
+			}
+
+		`
+
+		let styleSheet = document.createElement("style")
+		styleSheet.innerText = style
+		document.head.appendChild(styleSheet)
 
 		// min is the lowest index of the logos on a page, max is the highest index
 		// max will be determined based on min and the amount of logos we want on each page (4)