Show preview images until the real images have loaded

src/lib/components/kurosearch/media-gif/Gif.svelte

@@ -29,7 +29,7 @@
 	<img
 		class="post-media media-img"
 		loading="lazy"
-		data-src={data_src}
+		data-src-lowres={data_src}
 		alt={post.id.toString()}
 		width={post.width}
 		height={post.height}

src/lib/components/kurosearch/media-image/Image.svelte

@@ -11,8 +11,6 @@
 	let expandable = ratio < 0.33;
 
 	let open: boolean;
-
-	$: src = highResolutionEnabled ? post.file_url : post.sample_url;
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -24,7 +22,8 @@
 	<img
 		class="post-media"
 		loading="lazy"
-		data-src={src}
+		data-src-lowres={post.preview_url}
+		data-src-hires={highResolutionEnabled ? post.file_url : post.sample_url}
 		alt={post.id.toString()}
 		style="aspect-ratio: {calculateAspectRatioCss(post.width, post.height)}"
 		width={post.width}

src/lib/logic/post-observer.ts

@@ -4,12 +4,31 @@ const rootMargin = '1250px';
 
 export const postObserver = browser
 	? new IntersectionObserver(
-			(entries) => {
-				for (const entry of entries) {
-					const newSrc = entry.isIntersecting ? entry.target.getAttribute('data-src') ?? '' : '';
-					entry?.target?.setAttribute('src', newSrc);
+		(entries) => {
+			for (const entry of entries) {
+				//check if post is visible
+				if (entry.isIntersecting) {
+					//fetch source urls saved in the image data attributes
+					const lowSrc = entry.target.getAttribute('data-src-lowres') ?? '';
+					const highSrc = entry.target.getAttribute('data-src-hires') ?? '';
+
+					//when the image comes in and goes out of the viewport this prevents reloading the already loaded sources
+					if (entry.target.getAttribute('src') === highSrc) return;
+
+					//set post.preview_url to image sources or sources.static to gifs
+					entry?.target?.setAttribute('src', lowSrc);
+
+					//data-src-hires only exists on static images so skip the rest of the function on gifs
+					if (highSrc === '') return;
+					//create new non-visible image and swap the sources once loaded
+					const fullImage = new Image();
+					fullImage.src = highSrc;
+					fullImage.onload = () => {
+						entry.target.setAttribute('src', fullImage.src);
+					}
 				}
-			},
-			{ rootMargin }
-	  )
+			}
+		},
+		{ rootMargin }
+	)
 	: null;