feat: preload images with css hack

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)