fabi/Mangalord
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: preload the whole current chapter in continuous mode

Browse Source 
Eager-load every page of the current chapter rather than a bounded
rolling window, so pages are fetched up front (the browser paces them
over its per-origin connection limit, top-to-bottom = reading order)
instead of filling in as they're scrolled onto. This drops the
scrollLeadIdx/eagerThrough machinery in favour of a plain
`loading="eager"`.

The first few pages of the *next* chapter are already warmed when the
reader nears the end of the current one (the next-chapter preloader), so
flipping over stays instant.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
MechaCat02
2026-07-07 19:47:48 +02:00
parent c69ff502f7
commit 987d1ba235
6 changed files with 34 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
frontend/src/routes/manga/[id]/chapter/[chapter_id]/+page.svelte
View File

@@ -971,61 +971,6 @@
const furthestPage = $derived(mode === 'single' ? index + 1 : progressPage);
// ---- Current-chapter rolling preload window (continuous mode) ----
// Eager-load pages up to this index so they're fetched (and sized) a few
// pages ahead of the reading position — they arrive while still below the
// fold instead of popping in / reflowing as the user scrolls onto them.
// Pages past the window stay lazy so opening a long chapter doesn't fire
// every request at once.
//
// The window anchors on `initialIndex` (deterministic at open, and keeps
// the scroll-settle guarantee that pages `0..=initialIndex` are eager) and
// rolls forward by `scrollLeadIdx` — the page at the top of the viewport,
// measured from live geometry below. It deliberately does NOT use the
// read-progress high-water (`furthestPage`): before images load they're
// 0-height and pile into the viewport, which latches that mark to the last
// page and would eager-load the whole chapter on open.
const PRELOAD_AHEAD = 3;
let scrollLeadIdx = $state(0);
const eagerThrough = $derived(
Math.max(1, initialIndex, scrollLeadIdx) + PRELOAD_AHEAD
);
// Track the top-of-viewport page from live rects so the window rolls with
// actual scrolling. Guarded by `scrollY` so the pre-load 0-height pile-up
// (all rects collapsed near the top) can't inflate the lead at open.
$effect(() => {
if (!browser || mode !== 'continuous') return;
const measure = () => {
if (window.scrollY < 4) {
scrollLeadIdx = 0;
return;
}
const els = continuousPageEls;
for (let i = 0; i < els.length; i++) {
if (els[i] && els[i].getBoundingClientRect().bottom > 1) {
scrollLeadIdx = i;
return;
}
}
scrollLeadIdx = Math.max(0, els.length - 1);
};
measure();
let raf = 0;
const onScroll = () => {
if (raf) return;
raf = requestAnimationFrame(() => {
raf = 0;
measure();
});
};
window.addEventListener('scroll', onScroll, { passive: true });
return () => {
window.removeEventListener('scroll', onScroll);
if (raf) cancelAnimationFrame(raf);
};
});
$effect(() => {
const nc = nextChapter;
// Drop a previous chapter's warmed images once the next chapter
@@ -1358,20 +1303,19 @@
{:else}
<div class="continuous" style:gap="{gapPx}px" data-testid="reader-continuous">
{#each pages as p, i (p.id)}
<!-- Pages 0..=initialIndex (or at least 0..1) are eager
so their real heights are settled before the cold-
load scroll-to-`?page=N` effect fires. Without this,
`scrollIntoView(target)` lands while prior pages are
still 0×0 placeholders and the target gets pushed
past the viewport as they load. `eagerThrough` widens
that set into a rolling window a few pages ahead of the
reading position so pages load before they're scrolled
onto rather than filling in underneath the viewport. -->
<!-- The whole current chapter is eager: pages load up front
(the browser paces them over its per-origin connection
limit, top-to-bottom = reading order) rather than filling
in as they're scrolled onto. This also settles every page's
real height before the cold-load scroll-to-`?page=N` effect
fires — without it, `scrollIntoView(target)` lands while
prior pages are still 0×0 placeholders and the target gets
pushed past the viewport as they load. -->
<img
src={fileUrl(p.storage_key)}
alt={`${manga.title} chapter ${chapter.number} page ${i + 1}`}
class="page-image"
loading={i <= eagerThrough ? 'eager' : 'lazy'}
loading="eager"
oncontextmenu={(e) => onPageContextMenu(e, p.id)}
onpointerdown={(e) => onPagePointerDown(e, p.id)}
onpointermove={onPagePointerMove}