This commit is contained in:
2026-07-12 19:59:22 +02:00
parent 1762687fc8
commit 11bf73acc2

View File

@@ -2861,21 +2861,43 @@ window.cancelAnimFrame = (function () {
if (data.success) { if (data.success) {
if (replace) { if (replace) {
if (_isInPlaceGridReload) { if (_isInPlaceGridReload) {
// Same-grid reload: fade out current content, swap, fade back in. // Same-grid reload: snapshot already-loaded backgrounds BEFORE destroying DOM,
// .grid-fade-out has a 150ms opacity transition — we wait for it then swap. // then carry them over to matching items in the new HTML so they appear instantly.
// Without this, every thumb goes blank on innerHTML swap because the new elements
// have no style.backgroundImage, and even cached image loads are async (1+ frames).
const _loadedBgs = new Map();
posts.querySelectorAll('a.loaded[data-bg]').forEach(el => {
if (el.pathname && el.style.backgroundImage) {
_loadedBgs.set(el.pathname, el.style.backgroundImage);
}
});
// Fade out, swap, carry over, fade in
posts.classList.add('grid-fade-out'); posts.classList.add('grid-fade-out');
const _doSwap = () => { const _doSwap = () => {
posts.classList.remove('grid-fade-out'); posts.classList.remove('grid-fade-out');
posts.classList.add('grid-transition'); posts.classList.add('grid-transition');
posts.classList.remove('show'); posts.classList.remove('show');
posts.innerHTML = data.html; posts.innerHTML = data.html;
// Re-apply loaded backgrounds to matching items — zero async work needed
posts.querySelectorAll('a[data-bg]').forEach(el => {
const bg = _loadedBgs.get(el.pathname);
if (bg) {
el.style.backgroundImage = bg;
el.classList.add('loaded');
el.classList.remove('lazy-thumb');
}
});
window.updateVisitIndicators(); window.updateVisitIndicators();
window.initLazyLoading(); window.initLazyLoading(); // only fires for truly new items not in _loadedBgs
window.scrollTo(0, 0); window.scrollTo(0, 0);
requestAnimationFrame(() => posts.classList.add('show')); requestAnimationFrame(() => posts.classList.add('show'));
}; };
// Wait for the .grid-fade-out transition (150ms in CSS) // Wait for the .grid-fade-out transition (150ms in CSS)
setTimeout(_doSwap, 160); setTimeout(_doSwap, 160);
} else { } else {
// Structural transition: content is already blank/replaced, just inject and show // Structural transition: content is already blank/replaced, just inject and show
posts.innerHTML = data.html; posts.innerHTML = data.html;