fix: lazy loading (ng-defer-load) works in chromium only on block-ele…

…ments (#28)

closes #28

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>

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)

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>
     `);
   });

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>