fix(Imageloader): fixed issue where browser would load both 1x and 2x images if the element was invi

Author: edoparearyee

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

@@ -87,12 +87,14 @@ describe('ImageLoaderComponent', () => {
 
   it('should set supportsSrcSet value', () => {
     component.supportsSrcSet = false;
+    component.inViewport = true;
+    component.loaded = false;
     const img = document.createElement('img');
     let srcSupport = false;
     if ('srcset' in img) {
       srcSupport = true;
     }
-    component.ngAfterViewInit();
+    component.preloadImage();
     expect(component.supportsSrcSet).toEqual(srcSupport);
   });
 
@@ -143,6 +145,7 @@ describe('ImageLoaderComponent', () => {
     component.supportsSrcSet = false;
     component.size = 'xs';
     component.loaded = false;
+    component.dummyImg.nativeElement = { src: null };
     component.preloadImage();
     expect(component.preloadSrc).toEqual('http://via.placeholder.com/150x350?text=xs+1x');
 
@@ -157,6 +160,7 @@ describe('ImageLoaderComponent', () => {
     component.supportsSrcSet = false;
     component.size = 'xs';
     component.loaded = false;
+    component.dummyImg.nativeElement = { src: null };
     component.preloadImage();
     expect(component.preloadSrc).toEqual('http://via.placeholder.com/150x350?text=xs+1x');
 

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

@@ -208,10 +208,6 @@ export class ImageLoaderComponent implements OnInit, AfterViewInit, OnDestroy {
    * @memberof ImageLoaderComponent
    */
   public ngAfterViewInit(): void {
-    const dummyImg: HTMLElement = this.dummyImg.nativeElement;
-    if ('srcset' in dummyImg) {
-      this.supportsSrcSet = true;
-    }
     this.width$
       .takeUntil(this.ngUnsubscribe$)
       .debounceTime(10)
@@ -275,6 +271,9 @@ export class ImageLoaderComponent implements OnInit, AfterViewInit, OnDestroy {
       const retinaImg = this.image.images.filter(retinaImage => retinaImage.size === this.size)[0];
       const imageNormal = retinaImg.x1;
       const imageRetina = retinaImg.x2;
+      if ('srcset' in this.dummyImg.nativeElement) {
+        this.supportsSrcSet = true;
+      }
       this.supportsSrcSet ?
         this.preloadSrcset = `${imageNormal} 1x, ${imageRetina} 2x` :
         this.preloadSrc = `${imageNormal}`;