mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-09-25 01:53:03 +02:00
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:
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user