fix: Fix image lazy loading for Chrome in SSR mode (#18761)

This PR provides the work around for not working image lazy loading in SSR in Chrome and Safari. Closes: https://jira.tools.sap/browse/CXSPA-6719
SAP · Apr 25, 2024 · 064d237 · 064d237
1 parent 0b7d289
commit 064d237
Showing 1 changed file with 34 additions and 24 deletions.
diff --git a/projects/storefrontlib/shared/components/media/media.component.html b/projects/storefrontlib/shared/components/media/media.component.html
@@ -1,26 +1,36 @@
-<picture *ngIf="media?.srcset && !isLegacy; else tmpImg">
-  <source
-    *ngFor="
-      let source of media!.srcset! | cxMediaSources;
-      trackBy: trackByMedia
-    "
-    [srcset]="source.srcset"
-    [media]="source.media"
-  />
+<ng-container *ngIf="!!media">
+  <picture *ngIf="media.srcset && !isLegacy; else legacyImgTmp">
+    <source
+      *ngFor="
+        let source of media!.srcset! | cxMediaSources;
+        trackBy: trackByMedia
+      "
+      [srcset]="source.srcset"
+      [media]="source.media"
+    />
 
-  <ng-container [ngTemplateOutlet]="tmpImg"></ng-container>
-</picture>
+    <img
+      [loading]="loading"
+      [alt]="media.alt"
+      [title]="media.alt"
+      [src]="media.src"
+      [attr.role]="media.role"
+      (load)="loadHandler()"
+      (error)="errorHandler()"
+    />
+  </picture>
 
-<ng-template #tmpImg>
-  <img
-    *ngIf="media && media.src"
-    [alt]="media.alt"
-    [title]="media.alt"
-    [src]="media.src"
-    [srcset]="media.srcset || media.src"
-    [attr.role]="media.role"
-    [loading]="loading"
-    (load)="loadHandler()"
-    (error)="errorHandler()"
-  />
-</ng-template>
+  <ng-template #legacyImgTmp>
+    <img
+      *ngIf="media.src"
+      [loading]="loading"
+      [alt]="media.alt"
+      [title]="media.alt"
+      [src]="media.src"
+      [srcset]="media?.srcset || media.src"
+      [attr.role]="media.role"
+      (load)="loadHandler()"
+      (error)="errorHandler()"
+    />
+  </ng-template>
+</ng-container>