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 177e2c8fca
commit ef78686432
Signed by: Alexander
GPG Key ID: 1D237BE83F9B05E8
2 changed files with 11 additions and 1 deletions
Show Stats 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; height: 255px;
object-fit: cover; object-fit: cover;
transition: 200ms; transition: 200ms;
}
.blur{
filter: blur(10px); filter: blur(10px);
backdrop-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="card" class:search_me={search} data-tags=[{recipe.tags}]>
<div class=div_div_image > <div class=div_div_image >
<div class=div_image style="background-image:url({'https://bocken.org/static/rezepte/placeholder/' + recipe.short_name + '.webp'})"> <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>
</div> </div>
{#if icon_override || recipe.season.includes(current_month)} {#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=""/> <img class:unblur={isloaded} id=image {src} on:load={() => {isloaded=true}} alt=""/>
</div> </div>
</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> </div>
</figure> </figure>
<div class=content><slot></slot></div> <div class=content><slot></slot></div>