ulith/pronounss
1
0
Fork 0
forked from mirrors/pronouns.cc
Code Pull requests Activity

feat: lazy load member avatars on user pages

Browse source
This commit is contained in:
sam 2024-02-13 17:13:03 +01:00
parent 31e1862ca9
commit 4745a1c04b
No known key found for this signature in database
GPG key ID: B4EF20DDE721CAA1
2 changed files with 8 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/lib/components/FallbackImage.svelte
View file

@ -4,6 +4,7 @@
export let urls: string[]; export let urls: string[];
export let alt: string; export let alt: string;
export let width = 300; export let width = 300;
export let lazyLoad = false;
const contentTypeFor = (url: string) => { const contentTypeFor = (url: string) => {
if (url.endsWith(".webp")) { if (url.endsWith(".webp")) {
@ -31,6 +32,7 @@
src={urls[0] || defaultAvatars[0]} src={urls[0] || defaultAvatars[0]}
{alt} {alt}
class="rounded-circle img-fluid" class="rounded-circle img-fluid"
loading={lazyLoad ? "lazy" : "eager"}
/> />
</picture> </picture>
{:else} {:else}

7
frontend/src/lib/components/PartialMemberCard.svelte
View file

@ -46,7 +46,12 @@
<div> <div>
<a href="/@{user.name}/{member.name}"> <a href="/@{user.name}/{member.name}">
<FallbackImage urls={memberAvatars(member)} width={200} alt="Avatar for {member.name}" /> <FallbackImage
urls={memberAvatars(member)}
width={200}
lazyLoad
alt="Avatar for {member.name}"
/>
</a> </a>
<p class="m-2"> <p class="m-2">
<a class="text-reset fs-5 text-break" href="/@{user.name}/{member.name}"> <a class="text-reset fs-5 text-break" href="/@{user.name}/{member.name}">