Hotfix/width set onInit

e2e/app.e2e-spec.ts

@@ -22,39 +22,57 @@ describe('ImageLoader Lib E2E Tests', function () {
     beforeEach(() => page.setWindowSize(300, 580));
 
     it('should load placeholder image', () => {
-      expect(page.getImageElement().getAttribute('src')).toEqual('http://via.placeholder.com/35x15?text=placeholder');
+      expect(page.getImageBottomElement().getAttribute('src')).toEqual('http://via.placeholder.com/35x15?text=placeholder');
     });
 
     it('should update placeholder loaded boolean on init', () => {
-      expect(page.getplaceholderBooleanElement().getText()).toEqual('true');
+      expect(page.getBottomPlaceholderBooleanElement().getText()).toEqual('true');
     });
   });
 
+  describe('inviewport image on load', () => {
+    beforeEach(() => page.setWindowSize(300, 580));
+
+    it('should load full res image if image is in viewport on page load', () => {
+
+      page.setWindowSize(300, 580);
+      browser.wait(() => page.getLoadedImageTopElement());
+
+      const imageLoaderCompClass = page.getImageTopLoaderComp().getAttribute('class');
+      const imgSrc = page.getImageTopElement().getAttribute('srcset');
+      expect(imageLoaderCompClass).toContain('sn-image-loaded');
+      expect(imgSrc).toEqual('http://via.placeholder.com/150x350?text=xs+1x 1x, http://via.placeholder.com/300x700?text=xs+2x 2x');
+
+
+    });
+
+  });
+
   describe('lazy load image', () => {
     beforeEach(() => page.setWindowSize(300, 580));
 
-    it('should load image on when in viewport', () => {
-      let imageLoaderCompClass = page.getImageLoaderComp().getAttribute('class');
-      let imgSrc = page.getImageElement().getAttribute('src');
+    it('should load image when scrolled into viewport', () => {
+      let imageLoaderCompClass = page.getImageBottomLoaderComp().getAttribute('class');
+      let imgSrc = page.getImageBottomElement().getAttribute('src');
       expect(imageLoaderCompClass).toContain('sn-image-not-loaded');
       expect(imgSrc).toEqual('http://via.placeholder.com/35x15?text=placeholder');
 
-      page.scrollTo(0, 580 * 1.5);
-      browser.wait(() => page.getLoadedImageElement());
+      page.scrollTo(0, 580 * 2);
+      browser.wait(() => page.getLoadedImageBottomElement());
 
-      imageLoaderCompClass = page.getImageLoaderComp().getAttribute('class');
-      imgSrc = page.getImageElement().getAttribute('srcset');
+      imageLoaderCompClass = page.getImageBottomLoaderComp().getAttribute('class');
+      imgSrc = page.getImageBottomElement().getAttribute('srcset');
       expect(imageLoaderCompClass).toContain('sn-image-loaded');
       expect(imgSrc).toEqual('http://via.placeholder.com/150x350?text=xs+1x 1x, http://via.placeholder.com/300x700?text=xs+2x 2x');
 
     });
 
-    it('should update full res image event count on when in viewport', () => {
-      expect(page.getFullResCountElement().getText()).toEqual('0');
+    it('should update full res image event count scroll into viewport', () => {
+      expect(page.getBottomFullResCountElement().getText()).toEqual('0');
 
-      page.scrollTo(0, 580 * 1.5);
-      browser.wait(() => page.getLoadedImageElement());
-      expect(page.getFullResCountElement().getText()).toEqual('1');
+      page.scrollTo(0, 580 * 2);
+      browser.wait(() => page.getLoadedImageBottomElement());
+      expect(page.getBottomFullResCountElement().getText()).toEqual('1');
     });
 
   });
@@ -63,49 +81,49 @@ describe('ImageLoader Lib E2E Tests', function () {
 
     it('should load correct image for "xs" device size', () => {
       page.setWindowSize(300, 580);
-      page.scrollTo(0, 580 * 1.5);
-      browser.wait(() => page.getLoadedImageElement());
-      const imageLoaderCompClass = page.getImageLoaderComp().getAttribute('class');
-      const imgSrc = page.getImageElement().getAttribute('srcset');
+      page.scrollTo(0, 580 * 2);
+      browser.wait(() => page.getLoadedImageBottomElement());
+      const imageLoaderCompClass = page.getImageBottomLoaderComp().getAttribute('class');
+      const imgSrc = page.getImageBottomElement().getAttribute('srcset');
       expect(imageLoaderCompClass).toContain('sn-image-loaded');
       expect(imgSrc).toEqual('http://via.placeholder.com/150x350?text=xs+1x 1x, http://via.placeholder.com/300x700?text=xs+2x 2x');
     });
 
     it('should load correct image for "md" device size', () => {
       page.setWindowSize(768, 580);
-      page.scrollTo(0, 580 * 1.5);
-      browser.wait(() => page.getLoadedImageElement());
+      page.scrollTo(0, 580 * 2);
+      browser.wait(() => page.getLoadedImageBottomElement());
 
-      const imgSrc = page.getImageElement().getAttribute('srcset');
+      const imgSrc = page.getImageBottomElement().getAttribute('srcset');
       expect(imgSrc).toEqual('http://via.placeholder.com/350x250?text=md+1x 1x, http://via.placeholder.com/700x500?text=md+2x 2x');
     });
 
     it('should load correct image for "lg" device size', () => {
       page.setWindowSize(1024, 580);
-      page.scrollTo(0, 580 * 1.5);
-      browser.wait(() => page.getLoadedImageElement());
+      page.scrollTo(0, 580 * 2);
+      browser.wait(() => page.getLoadedImageBottomElement());
 
-      const imgSrc = page.getImageElement().getAttribute('srcset');
+      const imgSrc = page.getImageBottomElement().getAttribute('srcset');
       expect(imgSrc).toEqual('http://via.placeholder.com/700x400?text=lg+1x 1x, http://via.placeholder.com/1400x800?text=lg+2x 2x');
     });
 
     it('should update image loaded event count on window resize when image in viewport', () => {
-      expect(page.getFullResCountElement().getText()).toEqual('0');
+      expect(page.getBottomFullResCountElement().getText()).toEqual('0');
 
       page.setWindowSize(320, 580);
-      page.scrollTo(0, 580 * 1.5);
-      browser.wait(() => page.getLoadedImageElement());
-      expect(page.getFullResCountElement().getText()).toEqual('1');
+      page.scrollTo(0, 580 * 3);
+      browser.wait(() => page.getLoadedImageBottomElement());
+      expect(page.getBottomFullResCountElement().getText()).toEqual('1');
 
       page.setWindowSize(768, 580);
-      page.scrollTo(0, 580 * 1.5);
-      browser.wait(() => page.getLoadedImageElement());
-      expect(page.getFullResCountElement().getText()).toEqual('2');
+      page.scrollTo(0, 580 * 3);
+      browser.wait(() => page.getLoadedImageBottomElement());
+      expect(page.getBottomFullResCountElement().getText()).toEqual('2');
 
       page.setWindowSize(1024, 580);
-      page.scrollTo(0, 580 * 1.5);
-      browser.wait(() => page.getLoadedImageElement());
-      expect(page.getFullResCountElement().getText()).toEqual('3');
+      page.scrollTo(0, 580 * 3);
+      browser.wait(() => page.getLoadedImageBottomElement());
+      expect(page.getBottomFullResCountElement().getText()).toEqual('3');
     });
 
   });

e2e/app.po.ts

@@ -13,27 +13,39 @@ export class AppPage {
     return browser.driver.manage().window().setSize(x, y);
   }
 
-  getImageLoaderComp() {
-    return element(by.css('sn-image-loader'));
+  getImageTopLoaderComp() {
+    return element(by.css('.sn-image-loader--top'));
   }
 
-  getImageElement() {
-    return element(by.css('sn-image-loader .foo'));
+  getImageBottomLoaderComp() {
+    return element(by.css('.sn-image-loader--bottom'));
   }
 
-  getLoadedImageElement() {
-    return element(by.css('.sn-image-loaded')).isPresent();
+  getImageTopElement() {
+    return element(by.css('.sn-image-loader--top .img'));
+  }
+
+  getImageBottomElement() {
+    return element(by.css('.sn-image-loader--bottom .img'));
+  }
+
+  getLoadedImageBottomElement() {
+    return element(by.css('.sn-image-loader--bottom.sn-image-loaded')).isPresent();
+  }
+
+  getLoadedImageTopElement() {
+    return element(by.css('.sn-image-loader--top.sn-image-loaded')).isPresent();
   }
 
   getLoadedImageElementBySrcSet(srcSet) {
-    return element(by.css(`img[srcSet="${srcSet}"]`)).isPresent();
+    return element(by.css(`.img--bottom[srcSet="${srcSet}"]`)).isPresent();
   }
 
-  getplaceholderBooleanElement() {
+  getBottomPlaceholderBooleanElement() {
     return element(by.css('.placeholder-boolean'));
   }
 
-  getFullResCountElement() {
+  getBottomFullResCountElement() {
     return element(by.css('.full-res-count'));
   }
 }

src/app/app.component.html

@@ -1,13 +1,25 @@
-<h1>Scroll down ↓</h1>
-<h3>Placeholder image loaded: <span class="placeholder-boolean">{{ imagePlaceholderLoaded }}</span></h3>
-<div class="spacer"></div>
-<h3>imageLoaded event count: <span class="full-res-count">{{ imageLoadedEventCount }}</span></h3>
+<h3>Top image</h3>
 <sn-image-loader
   [image]="image"
   [sizes]="sizes"
-  imgClass="foo"
+  imgClass="img img--top"
   alt="lorem ipsum"
-  (imagePlaceholderLoaded)="onPlaceholderLoad($event)"
-  (imageLoaded)="onFullResLoad($event)"
+  class="sn-image-loader sn-image-loader--top"
+></sn-image-loader>
+
+<h1>Scroll down for bottom image ↓</h1>
+<h3>Bottom image placeholder loaded: <span class="placeholder-boolean">{{ imagePlaceholderLoaded }}</span></h3>
+<div class="spacer"></div>
+
+<h3>Bottom image</h3>
+<sn-image-loader
+[image]="image"
+[sizes]="sizes"
+imgClass="img img--bottom"
+alt="lorem ipsum"
+(imagePlaceholderLoaded)="onPlaceholderLoad($event)"
+(imageLoaded)="onFullResLoad($event)"
+class="sn-image-loader sn-image-loader--bottom"
 ></sn-image-loader>
+<h3>Bottom image imageLoaded event count: <span class="full-res-count">{{ imageLoadedEventCount }}</span></h3>
 <div class="spacer"></div>

src/app/app.component.scss

@@ -7,21 +7,21 @@
   min-height: 150vh;
 }
 
-:host ::ng-deep .foo {
+:host ::ng-deep .img {
   transition: all .35s ease-in-out;
   width: 150px;
 }
 
 @media (min-width: 768px) {
-  :host ::ng-deep .foo {
+  :host ::ng-deep .img {
     width: 500px;
   }
 }
 
-:host ::ng-deep .sn-image-not-loaded .foo {
+:host ::ng-deep .sn-image-not-loaded .img {
   filter: blur(20px);
 }
 
-:host ::ng-deep .sn-image-loaded .foo {
+:host ::ng-deep .sn-image-loaded .img {
   filter: blur(0px);
 }

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

@@ -192,15 +192,14 @@ export class ImageLoaderComponent implements OnInit, AfterViewInit, OnDestroy {
    *
    * @memberof ImageLoaderComponent
    */
-  constructor(private windowRef: WindowRef) {
-    this.onWidthChange(this.windowRef.innerWidth);
-  }
+  constructor(private windowRef: WindowRef) {}
   /**
    * Set placeholder image as image on component init
    *
    * @memberof ImageLoaderComponent
    */
   public ngOnInit(): void {
+    this.onWidthChange(this.windowRef.innerWidth);
     this.setPlaceholder();
   }
   /**