feat(home): htmx lazy-load cover images

Replace the eager <img> on the home page with an htmx placeholder <figure>
that fetches a /cover-fragment endpoint when it scrolls into view
(hx-trigger="revealed"), so heavy cover bytes load only on demand.
Add spinner + settle-fade transition CSS, and load htmx.min.js on home.
This commit is contained in:
Pontoporeia
2026-09-18 16:26:36 +02:00
parent 541470b9bb
commit fc66b37801
9 changed files with 366 additions and 6 deletions
+8 -4
View File
@@ -17,10 +17,14 @@
$thumb = $coverMap[$item['id']] ?? null;
?>
<?php if ($thumb): ?>
<figure>
<img src="/media?path=<?= urlencode($thumb) ?>"
alt="Couverture — <?= htmlspecialchars($item['title']) ?> par <?= htmlspecialchars($item['authors'] ?? '') ?>"
loading="lazy">
<figure
hx-get="/cover-fragment?path=<?= urlencode($thumb) ?>"
hx-trigger="intersect threshold:0.05 once"
hx-swap="innerHTML"
aria-busy="true">
<div class="card__media--placeholder" role="status">
<span class="card__cover-loading">…</span>
</div>
</figure>
<?php else: ?>
<div class="card__media--gradient"