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 @@
+
+
%sveltekit.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");
+ })
+ }
+
+}