From 4d710514f5d7931bfd0673c6d44c5a1d725a5cd3 Mon Sep 17 00:00:00 2001
From: Wolfgang Müller
Date: Sun, 21 Jul 2024 15:35:43 +0200
Subject: frontend/reader: Preload the next set of images
---
frontend/src/lib/reader/PageView.svelte | 22 ++++++++++++++++++++++
1 file changed, 22 insertions(+)
(limited to 'frontend/src/lib')
diff --git a/frontend/src/lib/reader/PageView.svelte b/frontend/src/lib/reader/PageView.svelte
index cc4d10e..59136b4 100644
--- a/frontend/src/lib/reader/PageView.svelte
+++ b/frontend/src/lib/reader/PageView.svelte
@@ -2,6 +2,7 @@
import { Direction, Layout, type PageFragment } from '$gql/graphql';
import { getReaderContext, partition, type Chunk } from '$lib/Reader';
import { binds } from '$lib/Shortcuts';
+ import { src } from '$lib/Utils';
import ReaderPage from './ReaderPage.svelte';
const reader = getReaderContext();
@@ -21,6 +22,22 @@
$reader.page = chunks[to].index;
}
+ function pagesAround(around: number) {
+ const peek = (at: number) => {
+ if (at < 0 || at >= chunks.length) return [];
+
+ const pages = [chunks[at].main];
+
+ if (chunks[at].secondary) {
+ pages.push(chunks[at].secondary);
+ }
+
+ return pages;
+ };
+
+ return [...peek(lookup[around] + 1), ...peek(lookup[around] - 1)];
+ }
+
const next = () => gotoChunk(lookup[$reader.page] + 1);
const prev = () => gotoChunk(lookup[$reader.page] - 1);
@@ -65,3 +82,8 @@
<ReaderPage page={secondary} on:click={next} --justify="flex-end" />
<ReaderPage page={main} on:click={prev} --justify="flex-start" />
{/if}
+<div class="invisible absolute">
+ {#each pagesAround($reader.page) as page}
+ <img src={src(page.image, 'full')} alt="" />
+ {/each}
+</div>
--
cgit v1.2.3-2-gb3c3