From b02b28d3e37d66e70de026f368350b8df57fe8c0 Mon Sep 17 00:00:00 2001
From: Leeingnyo <dyd1928@naver.com>
Date: Mon, 16 Aug 2021 01:42:07 +0900
Subject: [PATCH] Implement to preload images when viewer is paged mode

---
 public/js/reader.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/public/js/reader.js b/public/js/reader.js
index f227972..a2a422a 100644
--- a/public/js/reader.js
+++ b/public/js/reader.js
@@ -11,6 +11,7 @@ const readerComponent = () => {
 		lastSavedPage: page,
 		selectedIndex: 0, // 0: not selected; 1: the first page
 		margin: 30,
+		preloadLookahead: 3,
 
 		/**
 		 * Initialize the component by fetching the page dimensions
@@ -52,6 +53,13 @@ const readerComponent = () => {
 					if (savedMargin) {
 						this.margin = savedMargin;
 					}
+
+					// Preload Images
+					this.preloadLookahead = 3;
+					const limit = Math.min(page + this.preloadLookahead, this.items.length + 1);
+					for (let idx = page + 1; idx <= limit; idx++) {
+						this.preloadImage(this.items[idx - 1].url);
+					}
 				})
 				.catch(e => {
 					const errMsg = `Failed to get the page dimensions. ${e}`;
@@ -60,6 +68,12 @@ const readerComponent = () => {
 					this.msg = errMsg;
 				})
 		},
+		/**
+		 * Preload an image, which is expected to be cached
+		 */
+		preloadImage(url) {
+			(new Image()).src = url;
+		},
 		/**
 		 * Handles the `change` event for the page selector
 		 */
@@ -111,6 +125,10 @@ const readerComponent = () => {
 
 			if (newIdx <= 0 || newIdx > this.items.length) return;
 
+			if (newIdx + this.preloadLookahead < this.items.length + 1) {
+				this.preloadImage(this.items[newIdx + this.preloadLookahead - 1].url);
+			}
+
 			this.toPage(newIdx);
 
 			if (isNext)