Lazily load user/level avatars and photos

LittleBigRefresh · Aug 27, 2024 · a5673cb · a5673cb
1 parent 1e52be3
commit a5673cb
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/src/app/components/items/photo.component.ts b/src/app/components/items/photo.component.ts
@@ -50,7 +50,7 @@ import {RouterLink} from "@angular/router";
     
     <!--  640x360 is the size of the typical LBP2 photo  -->
     <a [routerLink]="link ? '/photo/' + photo.photoId : null">
-      <img [ngSrc]="photo.largeHash" width="640" height="360" alt="" class="w-full h-auto">
+      <img [ngSrc]="photo.largeHash" width="640" height="360" alt="" class="w-full h-auto" loading="lazy">
     </a>
     
     <div class="text-sm flex" [ngClass]="padding ? 'p-2.5' : 'pt-2.5'">

diff --git a/src/app/components/ui/photos/level-avatar.component.ts b/src/app/components/ui/photos/level-avatar.component.ts
@@ -11,7 +11,7 @@ import {Level} from "../../../api/types/levels/level";
   template: `
     @if (this.level) {
       <img [ngSrc]=this.level.iconHash [width]=size [height]=size class="inline rounded-full h-auto aspect-square object-cover" alt=""
-        (error)="err($event.target)" style="min-width: {{size}}px;">
+        (error)="err($event.target)" style="min-width: {{size}}px;" loading="lazy">
     }
     `
 })

diff --git a/src/app/components/ui/photos/user-avatar.component.ts b/src/app/components/ui/photos/user-avatar.component.ts
@@ -13,7 +13,7 @@ import { NgClass, NgOptimizedImage, NgStyle } from "@angular/common";
   template: `
     @if (this.user) {
       <img [ngSrc]=this.user.iconHash [width]=size [height]=size class="inline rounded h-auto aspect-square object-cover" alt=""
-        (error)="err($event.target)" [ngStyle]="{'min-height': size + 'px', 'min-width': size + 'px'}">
+        (error)="err($event.target)" [ngStyle]="{'min-height': size + 'px', 'min-width': size + 'px'}" loading="lazy">
     }
     `
 })