⚡ Lazy-loading images on dashboard

2022-12-14 19:22:32 +01:00
parent 6ec2970846
commit 47ec493fa6
2 changed files with 50 additions and 6 deletions
@@ -0,0 +1,30 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+// Stolen from https://svelte.dev/repl/c6a402704224403f96a3db56c2f48dfc?version=3.55.0
+let intersectionObserver;
+
+function ensureIntersectionObserver() {
+	if (intersectionObserver) return;
+
+	intersectionObserver = new IntersectionObserver((entries) => {
+		entries.forEach((entry) => {
+			const eventName = entry.isIntersecting ? 'enterViewport' : 'exitViewport';
+			entry.target.dispatchEvent(new CustomEvent(eventName));
+		});
+	});
+}
+
+export default function viewport(element) {
+	ensureIntersectionObserver();
+
+	intersectionObserver.observe(element);
+
+	return {
+		destroy() {
+			intersectionObserver.unobserve(element);
+		}
+	};
+}