From 607f16f7a66ce3a749267fcbdea2a5be89c5b99d Mon Sep 17 00:00:00 2001
From: Gerben Oolbekkink <g.j.w.oolbekkink@gmail.com>
Date: Wed, 26 Feb 2020 15:25:53 +0100
Subject: [PATCH] Fixes #18: Preload images.

Preloads the next and previous image when a user navigates to an image.
Preloading happens right after the navigation is done.

Calling load on an already loaded image will not cause the browser to
do another request, this way the method can be called multiple times
without worry.

Uses Promise.all to make sure both images get loaded as fast as
possible.
---
 src/gallery/index.ts | 33 +++++++++++++++++++++------------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/gallery/index.ts b/src/gallery/index.ts
index 6202f92..58eecf7 100644
--- a/src/gallery/index.ts
+++ b/src/gallery/index.ts
@@ -15,6 +15,7 @@ import Params from './parameters';
 import defaults from './defaults';
 import withSlideShow from "./with-slideshow";
 import withThumbnails from "./with-thumbnails";
+import load from '../utils/load';
 
 let id = 1;
 
@@ -177,32 +178,36 @@ export class Gallery extends Component {
         return this.getItems().find(item => item.hash === hash);
     }
 
-    protected async next(): Promise<void> {
+    public get nextItem() {
         const { album, item } = this;
         const { items } = album;
         const next = items[items.indexOf(item)+1];
-
         if (next) {
-            await this.goToItem(next);
-        }
-        else {
-            await this.goToItem(items[0]);
+            return next;
+        } else {
+            return items[0];
         }
     }
 
-    protected async prev(): Promise<void> {
+    protected async next(): Promise<void> {
+        await this.goToItem(this.nextItem);
+    }
+
+    public get prevItem() {
         const { album, item } = this;
         const { items } = album;
         const prev = items[items.indexOf(item)-1];
-
         if (prev) {
-            await this.goToItem(prev);
-        }
-        else {
-            await this.goToItem(items[items.length-1]);
+            return prev;
+        } else {
+            return items[items.length-1];
         }
     }
 
+    protected async prev(): Promise<void> {
+        await this.goToItem(this.prevItem);
+    }
+
     private showTransitionCanvas(): void {
         this.previewElement.appendChild(this.transitionCanvas.element);
     }
@@ -270,6 +275,10 @@ export class Gallery extends Component {
                     resolve();
                     return Promise.resolve();
                 },
+                () => Promise.all([
+                    () => this.nextItem.element ? Promise.resolve() : load(this.nextItem.url),
+                    () => this.prevItem.element ? Promise.resolve() : load(this.prevItem.url)
+                ]),
             );
 
             queue.run();