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

no blurred image if JS disabled

Browse Source
This commit is contained in:
Alexander Bocken
2024-01-22 14:43:52 +01:00
parent 0b71279c74
commit df4a3763c1
2 changed files with 11 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -48,6 +48,8 @@ onMount(() => {
height: 255px;
object-fit: cover;
transition: 200ms;
}
.blur{
filter: blur(10px);
backdrop-filter: blur(10px);
}
@@ -172,7 +174,10 @@ onMount(() => {
<div class="card" class:search_me={search} data-tags=[{recipe.tags}]>
<div class=div_div_image >
<div class=div_image style="background-image:url({'https://bocken.org/static/rezepte/placeholder/' + recipe.short_name + '.webp'})">
<img class:unblur={isloaded} id=image src={'https://bocken.org/static/rezepte/thumb/' + recipe.short_name + '.webp'} loading=lazy alt="{recipe.alt}" on:load={() => isloaded=true}/>
<noscript>
<img id=image src={'https://bocken.org/static/rezepte/thumb/' + recipe.short_name + '.webp'} loading=lazy alt="{recipe.alt}"/>
</noscript>
<img class:blur={!isloaded} id=image class=blur src={'https://bocken.org/static/rezepte/thumb/' + recipe.short_name + '.webp'} loading=lazy alt="{recipe.alt}" on:load={() => isloaded=true}/>
</div>
</div>
{#if icon_override || recipe.season.includes(current_month)}

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

@@ -170,6 +170,11 @@ dialog button{
<img class:unblur={isloaded} id=image {src} on:load={() => {isloaded=true}} alt=""/>
</div>
</div>
<noscript>
<div class=placeholder style="background-image:url({placeholder_src})" >
<img class="unblur" id=image {src} on:load={() => {isloaded=true}} alt=""/>
</div>
</noscript>
</div>
</figure>
<div class=content><slot></slot></div>