From 3ab92173efe6cc5105edcd55420c332956d19eb4 Mon Sep 17 00:00:00 2001 From: Simon Cordt Date: Thu, 25 Sep 2025 12:11:15 +0200 Subject: [PATCH] Improve image loading and rendering in history view --- web/css/queue_style.css | 2 +- web/js/pqueue.ui.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/web/css/queue_style.css b/web/css/queue_style.css index f87f3b7..203a165 100644 --- a/web/css/queue_style.css +++ b/web/css/queue_style.css @@ -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} diff --git a/web/js/pqueue.ui.js b/web/js/pqueue.ui.js index d983bde..67cc61d 100644 --- a/web/js/pqueue.ui.js +++ b/web/js/pqueue.ui.js @@ -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}` }));