Author: NikolaRHristov

Source/Background.astro

@@ -1,60 +1,92 @@
-<div id="Background"></div>
+---
+import { Image } from "astro:assets";
+---
+
+<div id="Layout">
+	<div id="Background" class="Container">
+		<Image
+			src="/Asset/Background.svg"
+			alt=""
+			role="presentation"
+			class="Image"
+			loading="eager"
+			decoding="async"
+			width={1920}
+			height={1080}
+		/>
+	</div>
+
+	<div id="Rock" class="Container">
+		<picture>
+			<source
+				media="(min-width: 1920px)"
+				srcset="/Asset/DesktopLargeRock.webp"
+			/>
+
+			<source
+				media="(min-width: 1280px)"
+				srcset="/Asset/DesktopRock.webp"
+			/>
+
+			<source
+				media="(min-width: 768px)"
+				srcset="/Asset/TabletRock.webp"
+			/>
+
+			<img
+				src="/Asset/MobileRock.webp"
+				alt=""
+				role="presentation"
+				class="Image"
+				loading="eager"
+				decoding="async"
+				width="2400"
+				height="1309"
+			/>
+		</picture>
+	</div>
+</div>
 
 <style>
 	@import "./Background/Stylesheet.css";
 </style>
 
-<script is:inline>
-	document.addEventListener("DOMContentLoaded", () => {
-		const Container = document.getElementById("Background");
+<script>
+	(() => {
+		const Layout = document.querySelector<HTMLDivElement>("#Layout");
 
-		if (!Container) {
+		const _Image = Array.from(
+			Layout?.querySelectorAll<HTMLImageElement>(".Image") ?? [],
+		);
+
+		if (!Layout || _Image.length === 0) {
 			return;
 		}
 
-		let Rock;
+		const Load = performance.now();
 
-		if (window.matchMedia("(min-width: 1920px)").matches) {
-			Rock = "/Asset/DesktopLargeRock.webp";
-		} else if (window.matchMedia("(min-width: 1280px)").matches) {
-			Rock = "/Asset/DesktopRock.webp";
-		} else if (window.matchMedia("(min-width: 768px)").matches) {
-			Rock = "/Asset/TabletRock.webp";
-		} else {
-			Rock = "/Asset/MobileRock.webp";
-		}
+		Promise.all(
+			_Image.map((_Image) => {
+				if (_Image.complete) {
+					return Promise.resolve();
+				}
+
+				return new Promise((resolve, reject) => {
+					_Image.addEventListener("load", resolve);
 
-		const Element = [Rock, "/Asset/Background.svg"].map((src) => {
-			const _Image = new Image();
-
-			_Image.src = src;
-
-			return _Image;
-		});
-
-		if (Element.every((Image) => Image.complete)) {
-			Container.classList.add("Load");
-		} else {
-			Promise.all(
-				Element.map((Image) => {
-					return new Promise((Resolve, Reject) => {
-						if (Image.complete) {
-							// @ts-expect-error
-							Resolve();
-						} else {
-							Image.onload = Resolve;
-
-							Image.onerror = Reject;
-						}
-					});
-				}),
-			).then(() => {
-				Container.classList.add("WithTransition");
-
-				setTimeout(() => {
-					Container.classList.add("Load");
-				}, 0);
+					_Image.addEventListener("error", reject);
+				});
+			}),
+		)
+			.then(() => {
+				if (performance.now() - Load > 50) {
+					Layout.classList.add("Transition");
+				}
+
+				Layout.classList.add("Load");
+			})
+			.catch(() => {
+				Layout.classList.add("Load");
 			});
-		}
-	});
+	})();
 </script>

Source/Background/Stylesheet.css

@@ -1,105 +1,33 @@
-#Background {
-	position: fixed;
-
-	left: 0;
-
-	top: 0;
-
-	height: 100vh;
-
-	width: 100vw;
+#Layout {
+	@apply fixed inset-0 h-screen w-screen overflow-hidden opacity-0;
 
 	z-index: -1;
 
-	opacity: 0;
-
 	&.Load {
-		opacity: 1;
+		@apply opacity-100;
 	}
 
-	&.WithTransition {
-		transition: opacity 0.8s ease-in-out;
+	&.Transition {
+		transition: opacity 0.8s ease-out;
 	}
 
-	&:before {
-		content: "";
-
-		position: fixed;
-
-		left: 50%;
-
-		top: 50%;
-
-		height: 100vh;
+	.Container {
+		@apply absolute left-1/2 top-1/2 h-screen;
 
 		width: 160vw;
 
-		transform: translateX(-50%) translateY(-50%);
-
-		background-size: cover;
-
-		background-position: center;
-
-		background-repeat: no-repeat;
+		transform: translate(-50%, -50%);
+	}
 
-		image-rendering: pixelated;
+	.Image {
+		@apply h-full w-full object-cover object-center;
+	}
 
+	#Rock {
 		z-index: -3;
-
-		background-image: image-set(
-			url("/Asset/MobileRock.webp") 1x,
-
-			url("/Asset/TabletRock.webp") 2x
-		);
-
-		@media (min-width: 768px) {
-			& {
-				background-image: image-set(
-					url("/Asset/TabletRock.webp") 1x,
-
-					url("/Asset/DesktopRock.webp") 2x
-				);
-			}
-		}
-		@media (min-width: 1280px) {
-			& {
-				background-image: image-set(
-					url("/Asset/DesktopRock.webp") 1x,
-
-					url("/Asset/DesktopLargeRock.webp") 2x
-				);
-			}
-		}
-		@media (min-width: 1920px) {
-			& {
-				background-image: url("/Asset/DesktopLargeRock.webp");
-			}
-		}
 	}
 
-	&:after {
-		content: "";
-
-		position: fixed;
-
-		left: 50%;
-
-		top: 50%;
-
-		height: 100vh;
-
-		width: 160vw;
-
-		transform: translateX(-50%) translateY(-50%);
-
-		background-size: cover;
-
-		background-position: center;
-
-		background-repeat: no-repeat;
-
-		background-image: url("/Asset/Background.svg");
-
+	#Background {
 		z-index: -2;
 	}
 }