feat(ImageLoader): remove dummy element after image load

Author: edoparearyee

src/app/image-loader/image-loader/image-loader.component.html

@@ -1,5 +1,5 @@
 <img
-  *ngIf="image"
+  #img
   [src]="src"
   [srcset]="srcset"
   [alt]="alt"
@@ -10,7 +10,7 @@
   (load)="onImageLoad($event)">
 
 <img
-  #dummyImg
+  *ngIf="preloadSrc.length || preloadSrcset.length"
   class="sn-img-dummy"
   [srcset]="preloadSrcset"
   [src]="preloadSrc"

src/app/image-loader/image-loader/image-loader.component.scss

@@ -1,9 +1,7 @@
 .sn-img-dummy {
-  display: block;
-  left: 0;
-  position: fixed;
-  right: 0;
-  top: -999rem;
+  opacity: 0;
+  height: 0;
+  width: 0;
   visibility: hidden;
-  z-index: -9999;
+  display: block;
 }

src/app/image-loader/image-loader/image-loader.component.spec.ts

@@ -138,7 +138,7 @@ describe('ImageLoaderComponent', () => {
     component.supportsSrcSet = false;
     component.size = 'xs';
     component.loaded = false;
-    component.dummyImg.nativeElement = { src: null };
+    component.img.nativeElement = { src: null };
     component.preloadImage();
     expect(component.preloadSrc).toEqual('http://via.placeholder.com/150x350?text=xs+1x');
 
@@ -153,7 +153,7 @@ describe('ImageLoaderComponent', () => {
     component.supportsSrcSet = false;
     component.size = 'xs';
     component.loaded = false;
-    component.dummyImg.nativeElement = { src: null };
+    component.img.nativeElement = { src: null };
     component.preloadImage();
     expect(component.preloadSrc).toEqual('http://via.placeholder.com/150x350?text=xs+1x');
 

src/app/image-loader/image-loader/image-loader.component.ts

@@ -132,8 +132,8 @@ export class ImageLoaderComponent implements OnInit, AfterViewInit, OnDestroy {
    *
    * @memberof ImageLoaderComponent
    */
-  @ViewChild('dummyImg')
-  public dummyImg: ElementRef;
+  @ViewChild('img')
+  public img: ElementRef;
   /**
    * If true it means the browser supports `srcset`
    * @memberof ImageLoaderComponent
@@ -255,7 +255,7 @@ export class ImageLoaderComponent implements OnInit, AfterViewInit, OnDestroy {
       const retinaImg = this.image.images.find(retinaImage => retinaImage.size === this.size);
       const imageNormal = retinaImg.x1;
       const imageRetina = retinaImg.x2;
-      if ('srcset' in this.dummyImg.nativeElement) {
+      if ('srcset' in this.img.nativeElement) {
         this.supportsSrcSet = true;
       }
       this.preloadSrcset = `${imageNormal} 1x, ${imageRetina} 2x`;