image-viewer: lazy-loader

3 files changed, 28 insertions, 3 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();
+		}
+	}
 }
diff --git a/static/widgets/image/index.css b/static/widgets/image/index.css
index 730a324..a53bddc 100644
--- a/static/widgets/image/index.css
+++ b/static/widgets/image/index.css
@@ -5,18 +5,22 @@
 	border-radius: var(--border-radius);
 	overflow: none;
 	box-shadow: #223223aa 1px 1px 4px;
+	background: var(--card-background);
 }
 
 #container img {
 	border-radius: var(--border-radius);
 	max-width: 700px;
-	width: 100%;
+	width: calc(100vw - 20px);
 	visibility: hidden;
 	margin-bottom: -5px;
+	height: calc((100vw - 20px) * 0.8);
 }
 
 #container.loaded img {
 	visibility: visible;
+	width: 100%;
+	height: unset;
 }
 
 @keyframes loader {
diff --git a/static/widgets/image/index.js b/static/widgets/image/index.js
index 202494b..4c25988 100644
--- a/static/widgets/image/index.js
+++ b/static/widgets/image/index.js
@@ -46,6 +46,11 @@ export default class Image extends sfw.element.Container {
 	set id(id) {
 		this.#id = id;
 		this.#container.classList.remove('loaded');
-		this.#image.src = `/api/image/load/${id}`;
+	}
+
+	load() {
+		if (!this.#image.src) {
+			this.#image.src = `/api/image/load/${this.#id}`;
+		}
 	}
 }