Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reliably unblur, only use unblur if image not already loaded

Browse Source
This commit is contained in:
Alexander Bocken 2023-07-12 12:44:44 +02:00
parent bfc20ec192
commit 6aaf4ecfb4
Signed by: Alexander
GPG Key ID: 1D237BE83F9B05E8
2 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/lib/components/Card.svelte
View File

@ -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{

12
src/lib/components/TitleImgParallax.svelte
View File

@ -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>