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

eager image loading for top recipes on page

Browse Source
This commit is contained in:
Alexander Bocken 2024-02-25 12:54:30 +01:00
parent b4dc4d194f
commit abddf4b201
Signed by: Alexander
GPG Key ID: 1D237BE83F9B05E8
2 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,6 +7,11 @@ import "$lib/css/nordtheme.css";
import "$lib/css/shake.css"; import "$lib/css/shake.css";
import "$lib/css/icon.css"; import "$lib/css/icon.css";
export let do_margin_right = false; export let do_margin_right = false;
// to manually override lazy loading for top cards
export let loading_strat : "lazy" | "eager" | undefined;
if(loading_strat === undefined){
loading_strat = "lazy"
}
if(icon_override){ if(icon_override){
current_month = recipe.season[0] current_month = recipe.season[0]
@ -182,9 +187,9 @@ const img_name=recipe.short_name + ".webp?v=" + recipe.dateModified
<div class=div_div_image > <div class=div_div_image >
<div class=div_image style="background-image:url(https://bocken.org/static/rezepte/placeholder/{img_name})"> <div class=div_image style="background-image:url(https://bocken.org/static/rezepte/placeholder/{img_name})">
<noscript> <noscript>
<img id=image class="backdrop_blur" src="https://bocken.org/static/rezepte/thumb/{img_name}" loading=lazy alt="{recipe.alt}"/> <img id=image class="backdrop_blur" src="https://bocken.org/static/rezepte/thumb/{img_name}" loading={loading_strat} alt="{recipe.alt}"/>
</noscript> </noscript>
<img class:blur={!isloaded} id=image class="backdrop_blur" src={'https://bocken.org/static/rezepte/thumb/' + recipe.short_name + '.webp'} loading=lazy alt="{recipe.alt}" on:load={() => isloaded=true}/> <img class:blur={!isloaded} id=image class="backdrop_blur" src={'https://bocken.org/static/rezepte/thumb/' + recipe.short_name + '.webp'} loading={loading_strat} 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)}

2
src/routes/rezepte/+page.svelte
View File

@ -36,7 +36,7 @@ h1{
<MediaScroller title="In Saison"> <MediaScroller title="In Saison">
{#each data.season as recipe} {#each data.season as recipe}
<Card {recipe} {current_month} do_margin_right={true}></Card> <Card {recipe} {current_month} loading_strat={"eager"} do_margin_right={true}></Card>
{/each} {/each}
</MediaScroller> </MediaScroller>