From cba69a924a34643f13d7f40735ee545282746c6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20H=C3=A4hnlein?=
 <50739746+Sebastian-Haehnlein@users.noreply.github.com>
Date: Mon, 2 Dec 2019 11:04:15 +0100
Subject: [PATCH] fix: lazy loading (ng-defer-load) works in chromium only on
 block-elements (#28)

closes #28
---
 .../category-image/category-image.component.html           | 4 ++--
 .../cms/components/cms-image/cms-image.component.html      | 4 ++--
 .../cms/components/cms-image/cms-image.component.spec.ts   | 7 ++++---
 .../components/product-image/product-image.component.html  | 4 ++--
 4 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/app/pages/category/components/category-image/category-image.component.html b/src/app/pages/category/components/category-image/category-image.component.html
index 27b6962ba9..c490ff6bf5 100644
--- a/src/app/pages/category/components/category-image/category-image.component.html
+++ b/src/app/pages/category/components/category-image/category-image.component.html
@@ -1,3 +1,3 @@
-<span (deferLoad)="showImage = true">
+<div (deferLoad)="showImage = true">
   <img *ngIf="showImage" [src]="categoryImageUrl" itemprop="image" />
-</span>
+</div>
diff --git a/src/app/shared/cms/components/cms-image/cms-image.component.html b/src/app/shared/cms/components/cms-image/cms-image.component.html
index 7ece1c8089..94eed4b783 100644
--- a/src/app/shared/cms/components/cms-image/cms-image.component.html
+++ b/src/app/shared/cms/components/cms-image/cms-image.component.html
@@ -12,14 +12,14 @@
 </ng-container>
 
 <ng-template #image>
-  <span (deferLoad)="showImage = true">
+  <div (deferLoad)="showImage = true">
     <img
       *ngIf="showImage"
       [src]="pagelet.stringParam('Image')"
       [attr.alt]="pagelet.stringParam('AlternateText')"
       [ngClass]="pagelet.stringParam('CSSClass')"
     />
-  </span>
+  </div>
 </ng-template>
 
 <!-- TODO: (CMS Component Configuration)
diff --git a/src/app/shared/cms/components/cms-image/cms-image.component.spec.ts b/src/app/shared/cms/components/cms-image/cms-image.component.spec.ts
index 346a148ea3..07f445fbdf 100644
--- a/src/app/shared/cms/components/cms-image/cms-image.component.spec.ts
+++ b/src/app/shared/cms/components/cms-image/cms-image.component.spec.ts
@@ -44,12 +44,13 @@ describe('Cms Image Component', () => {
     expect(() => fixture.detectChanges()).not.toThrow();
     expect(element).toMatchInlineSnapshot(`
       <a class="teaser-link" href="http://example.com" title="bar"
-        ><span
-          ><img
+        ><div>
+          <img
             class="foo"
             ng-reflect-ng-class="foo"
             src="http://example.com/foo/bar.png"
-            alt="foo"/></span
+            alt="foo"
+          /></div
       ></a>
     `);
   });
diff --git a/src/app/shell/header/components/product-image/product-image.component.html b/src/app/shell/header/components/product-image/product-image.component.html
index 4c71d6b711..6d483b0bcc 100644
--- a/src/app/shell/header/components/product-image/product-image.component.html
+++ b/src/app/shell/header/components/product-image/product-image.component.html
@@ -1,4 +1,4 @@
-<span (deferLoad)="showImage = true">
+<div (deferLoad)="showImage = true">
   <img
     *ngIf="showImage"
     [src]="imageSourceUrl()"
@@ -10,4 +10,4 @@
     [attr.alt]="getImgAltText()"
     itemprop="image"
   />
-</span>
+</div>