From 6aaf4ecfb42b676ab9cd1f569c83304d91fa3aa9 Mon Sep 17 00:00:00 2001
From: AlexBocken <alexander@bocken.org>
Date: Wed, 12 Jul 2023 12:44:44 +0200
Subject: [PATCH] reliably unblur, only use unblur if image not already loaded

---
 src/lib/components/Card.svelte             |  8 ++++++++
 src/lib/components/TitleImgParallax.svelte | 12 ++++++++++--
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/Card.svelte b/src/lib/components/Card.svelte
index b8d5f0d..a0f3aac 100644
--- a/src/lib/components/Card.svelte
+++ b/src/lib/components/Card.svelte
@@ -11,6 +11,14 @@ if(icon_override){
 }
 
 let isloaded = false
+
+import { onMount } from "svelte";
+	onMount(() => {
+		const el = document.querySelector("img")
+		if(el.complete){
+			isloaded = true
+		}
+	})
 </script>
 <style>
 .card{
diff --git a/src/lib/components/TitleImgParallax.svelte b/src/lib/components/TitleImgParallax.svelte
index 919f0ee..ea5c05d 100644
--- a/src/lib/components/TitleImgParallax.svelte
+++ b/src/lib/components/TitleImgParallax.svelte
@@ -2,6 +2,14 @@
 	export let src
 	export let placeholder_src
 	let isloaded=false
+	import { onMount } from "svelte";
+	onMount(() => {
+		const el = document.querySelector("img")
+		if(el.complete){
+			isloaded = true
+		}
+	})
+
 </script>
 <style>
 :root {
@@ -60,7 +68,7 @@
   object-fit: cover;
   object-position: 50% 20%;
   backdrop-filter: blur(20px);
-  transition: 200ms;
+  transition: 50ms;
   filter: blur(20px);
   z-index: -10;
 }
@@ -106,7 +114,7 @@ div:has(.placeholder){
     	<div>
 		<div class=placeholder style="background-image:url({placeholder_src})" >
 			<div class=placeholder_blur>
-			<img class:unblur={isloaded} id=image {src} on:load={() => isloaded=true} alt=""/>
+			<img class:unblur={isloaded} id=image {src} on:load={() => {isloaded=true}} alt=""/>
 			</div>
 		</div>
 	</div>