Improve image loading and rendering in history view

This commit is contained in:
Simon Cordt
2025-09-25 12:11:15 +02:00
parent 20ad903aa0
commit 3ab92173ef
2 changed files with 3 additions and 3 deletions
+1 -1
View File
@@ -101,7 +101,7 @@
.pqueue-table__footer-left{display:flex;gap:1rem;color:var(--subtle-text,#94a3b8);font-size:.76rem}
.pqueue-table__footer-right{display:flex;gap:.45rem}
.pqueue-history{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.85rem}
.pqueue-history-card{display:flex;flex-direction:column;gap:.55rem;padding:.75rem;background:#1a1a1a;border-radius:12px;border:1px solid rgba(82,82,91,.22);transition:box-shadow .15s ease,transform .15s ease}
.pqueue-history-card{display:flex;flex-direction:column;gap:.55rem;padding:.75rem;background:#1a1a1a;border-radius:12px;border:1px solid rgba(82,82,91,.22);transition:box-shadow .15s ease,transform .15s ease;contain-intrinsic-size:200px 260px;content-visibility:auto}
.pqueue-history-card:hover{box-shadow:0 8px 18px rgba(15,23,42,.26);transform:translateY(-1px)}
.pqueue-history-card__header{display:flex;align-items:center;justify-content:space-between;font-size:.74rem;color:var(--subtle-text,#94a3b8)}
.pqueue-history-card__meta{display:flex;align-items:center;gap:.5rem}
+2 -2
View File
@@ -985,7 +985,7 @@
const url = new URL(`/api/pqueue/history/thumb/${row.id}`, window.location.origin);
url.searchParams.set("_", String(Date.now()));
const wrap = UI.el("div", { class: "pqueue-thumb-wrap" });
const img = UI.el("img", { class: "pqueue-thumb", src: url.href, title: `history-${row.id}`, loading: "lazy" });
const img = UI.el("img", { class: "pqueue-thumb", src: url.href, title: `history-${row.id}`, loading: "lazy", decoding: "async", fetchpriority: "low" });
attachFallback(wrap, img, galleryImages);
wrap.appendChild(img);
const count = UI.countImages(row);
@@ -1000,7 +1000,7 @@
const first = images[0];
const url = UI.buildPreviewUrl(first, row.prompt_id);
const wrap = UI.el("div", { class: "pqueue-thumb-wrap" });
const img = UI.el("img", { class: "pqueue-thumb", src: url.href, title: first.filename, loading: "lazy" });
const img = UI.el("img", { class: "pqueue-thumb", src: url.href, title: first.filename, loading: "lazy", decoding: "async", fetchpriority: "low" });
attachFallback(wrap, img, images);
wrap.appendChild(img);
if (images.length > 1) wrap.appendChild(UI.el("div", { class: "pqueue-thumb-badge", text: `${images.length}` }));