1 files changed, 17 insertions, 1 deletions
diff --git a/static/pages/image-viewer/index.js b/static/pages/image-viewer/index.js
index e418e6f..72af671 100644
--- a/static/pages/image-viewer/index.js
+++ b/static/pages/image-viewer/index.js
@@ -8,16 +8,20 @@ const css = await sfw.css(import.meta.url, './index.css')
 export default class ImageViewer extends sfw.element.Container {
 	#container
 	#subtitle
+	#images
 
 	constructor() {
 		super({ css });
 
+		this.#images = [];
+
 		this.onnewer = () => {}
 		this.onolder = () => {}
 
 		this.body.append(
 			this.#container = Div.new({
 				id: 'container',
+				onscroll: () => this.#images.forEach(image => this.#preload(image)),
 				children: [
 					this.#subtitle = Div.new({
 						id: 'subtitle',
@@ -29,11 +33,23 @@ export default class ImageViewer extends sfw.element.Container {
 	}
 
 	add(id) {
-		this.#container.insertBefore(Image.new({ id }), this.#subtitle);
+		const image = Image.new({ id });
+		this.#images.push(image);
+		this.#container.insertBefore(image, this.#subtitle);
+
+		this.#preload(image);
 	}
 
 	clear() {
 		this.#container.innerHTML = '';
 		this.#container.append(this.#subtitle);
 	}
+
+	#preload(image) {
+		const loading_zone = (this.#container.scrollTop + this.#container.offsetHeight) * 2;
+
+		if (image.offsetTop < loading_zone) {
+			image.load();
+		}
+	}
 }