diff options
| author | Jan Tuomi <jan@jantuomi.fi> | 2025-06-03 09:00:47 +0300 |
|---|---|---|
| committer | Jan Tuomi <jan@jantuomi.fi> | 2025-06-03 09:00:47 +0300 |
| commit | bf31ea42ba606ba38081d84194c0dd7f806befab (patch) | |
| tree | 2608134dd87f6ff15b38400f737958c8c601d956 /templates/gallery.html | |
| parent | 11a3a2d8b275c1ef061ff37caa0a36faf5cce049 (diff) | |
Improvements
Diffstat (limited to 'templates/gallery.html')
| -rw-r--r-- | templates/gallery.html | 24 |
1 files changed, 17 insertions, 7 deletions
diff --git a/templates/gallery.html b/templates/gallery.html index b5447e2..f33c422 100644 --- a/templates/gallery.html +++ b/templates/gallery.html @@ -2,10 +2,6 @@ <html lang="en"> <head> <meta charset="UTF-8" /> - <link - rel="stylesheet" - href="{{ url_for('static', filename='style.css') }}" - /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" @@ -21,6 +17,13 @@ <meta property="og:image" content="{{ cover_img_url }}" /> <meta property="og:url" content="{{ base_url }}" /> <meta property="og:type" content="website" /> + + <title>Leo Lalla</title> + <link + rel="stylesheet" + href="{{ url_for('static', filename='style.css') }}" + /> + <script> function layout() { const isMobile = @@ -30,8 +33,15 @@ const img = item.querySelector("img"); if (!img) return; + const cleanup = () => img.classList.remove("loading"); + + if (img.complete) { + cleanup(); + } else { + img.addEventListener("load", cleanup, { once: true }); + } + if (isMobile) { - // On mobile, reset any previously set width item.style.width = ""; return; } @@ -52,6 +62,7 @@ window.addEventListener("resize", layout); </script> </head> + <body> <h1> {{ author }} {% if ig_link %} @@ -66,7 +77,6 @@ {% endif %} </h1> - <!-- --> {% for date in dates %} <h2>{{ date }}</h2> <div class="gallery"> @@ -78,8 +88,8 @@ > <img src="{{ url_for('serve_thumbnail', filename=f.thumbnail.split('/')[-1]) }}" - alt="{{ f.name }}" loading="lazy" + class="loading" /> </a> {% if f.description %} |