From cac3856de4fe23f2498d0f7137c616bff344df47 Mon Sep 17 00:00:00 2001
From: Max <jim-x@web.de>
Date: Mon, 20 Nov 2023 16:16:23 +0100
Subject: [PATCH] feat: fade in lazy loaded images

---
 src/app.html          |  2 ++
 src/routes/global.css | 27 ++++++++++++++++++---------
 static/lazy.js        | 13 +++++++++++++
 3 files changed, 33 insertions(+), 9 deletions(-)
 create mode 100644 static/lazy.js
diff --git a/src/app.html b/src/app.html
index 1cba89d..08c31a9 100644
--- a/src/app.html
+++ b/src/app.html
@@ -19,6 +19,8 @@
     <meta name="msapplication-TileColor" content="#da532c">
     <meta name="theme-color" content="#ffffff">
 
+    <script src="/lazy.js"/>
+
 	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
diff --git a/src/routes/global.css b/src/routes/global.css
index 8b643db..e5a49da 100644
--- a/src/routes/global.css
+++ b/src/routes/global.css
@@ -9,14 +9,23 @@
 }
 
 html, body {
-		height: 100%;
-		margin: 0;
-		padding: 0;
-		background-size: 80%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background-size: 80%;
 }
 
-	html {
-		background: black;
-		background-image: url(/pattern_b.jpg);
-    backdrop-filter: brightness(0.3);
-	}
+html {
+  background: black;
+  background-image: url(/pattern_b.jpg);
+  backdrop-filter: brightness(0.3);
+}
+
+img.lazy-image {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+img.lazy-image.loaded {
+  opacity: 1;
+}
diff --git a/static/lazy.js b/static/lazy.js
new file mode 100644
index 0000000..56464a3
--- /dev/null
+++ b/static/lazy.js
@@ -0,0 +1,13 @@
+window.onload = function(){
+
+  var lazyImages = [...document.querySelectorAll("img[loading='lazy']")];
+
+  for (let i = 0; i < lazyImages.length; i++) {
+    var element = lazyImages[i];
+    element.classList.add("lazy-image")
+    element.addEventListener("load", function(){
+      element.classList.add("loaded");
+    })
+  }
+
+}
