From 7fa067063cb90d7d1a6356eeede5d28472f86688 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9DNyymix=E2=80=9D?= <nyymix@gmail.com>
Date: Sat, 26 Apr 2025 20:49:10 +0300
Subject: [PATCH] Optimize parallax

---
 .../templates/gallery/partials/parallax.html  | 27 +++++++++++--------
 static/css/muistox.css                        | 10 +++++++
 2 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/gallery/templates/gallery/partials/parallax.html b/gallery/templates/gallery/partials/parallax.html
index 5634298..99b7196 100644
--- a/gallery/templates/gallery/partials/parallax.html
+++ b/gallery/templates/gallery/partials/parallax.html
@@ -1,26 +1,31 @@
 {% load top_tags %}
 {% load static %}
 
-<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="ratio: 7:3; autoplay: true; animation: fade">
+<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="ratio: 7:3; autoplay: true; animation: fade; min-height: 300;">
     <ul class="uk-slideshow-items">
         {% random_photos_landscape as top_photos %}
         {% if top_photos %}
         {% for photo in top_photos %}
         <li>
-            <img src="{{ photo.photo_md.url }}" 
+            {% with photo.aspect_ratio|default:2.33 as ratio %}
+            <img 
+                src="{{ photo.photo_sm.url }}" 
                 srcset="
                     {{ photo.photo_sm.url }} 480w,
                     {{ photo.photo_md.url }} 1024w,
                     {{ photo.photo_bg.url }} 1920w
-                " 
-                sizes="100vw"
-                width="{{ photo.width }}" 
-                height="{{ photo.height }}" 
-                style="aspect-ratio: 7 / 3;"
-                alt="Foto from {{ photo.album.name }} album"
+                "
+                sizes="(max-width: 640px) 480px, (max-width: 1200px) 1024px, 1920px"
+                width="1920" 
+                height="823"
+                style="aspect-ratio: {{ ratio }};"
+                alt="Photo from {{ photo.album.name }} album"
                 title="{{ photo.album.name }}" 
-                {% if forloop.first %} loading="eager" {% else %} loading="lazy" {% endif %}
-                uk-cover />
+                {% if forloop.first %} loading="eager" decoding="async" {% else %} loading="lazy" decoding="async" {% endif %}
+                uk-cover
+                class="lazyfade"
+            />
+            {% endwith %}
         </li>
         {% endfor %}
         {% else %}
@@ -28,7 +33,7 @@
             <img src="{% static 'img/placeholder.png' %}" 
                     width="1920" height="823"
                     style="aspect-ratio: 7 / 3;"
-                    alt="Placeholder" uk-cover />
+                    alt="Placeholder" uk-cover class="lazyfade" />
         </li>
         {% endif %}
     </ul>
diff --git a/static/css/muistox.css b/static/css/muistox.css
index 634fc49..ca17eea 100644
--- a/static/css/muistox.css
+++ b/static/css/muistox.css
@@ -37,4 +37,14 @@ body {
 		opacity: 1;
 		transform: scale(1);
 	}
+}
+
+.lazyfade {
+	opacity: 0;
+	transition: opacity 1s ease;
+}
+
+.lazyfade[loading="eager"],
+.lazyfade[loading="lazy"]:not([src=""]) {
+	opacity: 1;
 }
\ No newline at end of file