realtomaszkula

 private lazyLoad() {
    const obs = new IntersectionObserver(entries => {
      entries.forEach(({ isIntersecting }) => {
        if (isIntersecting) {
          this.srcAttr = this.src;
          obs.unobserve(this.el.nativeElement);
        }
      });
    });
    obs.observe(this.el.nativeElement);

realtomaszkula

import { AfterViewInit, Directive, ElementRef, HostBinding, Input } from '@angular/core';

@Directive({
  selector: 'img[appLazyLoad]'
})
export class LazyLoadDirective implements AfterViewInit {
  @HostBinding('attr.src') srcAttr = null;
  @Input() src: string;

  constructor(private el: ElementRef) {}

realtomaszkula

@Directive({
  selector: '[appProgressiveImageFallback]',
  providers: [...]
})
export class ProgressiveImageFallbackDirective implements OnInit, Dimensions {
  // ...
  @HostBinding('style.display') display = Display.flex;

  constructor(private imageState: ImageStateService) {}

realtomaszkula

@Directive({
  selector: '[appProgressiveImagePlaceholder]',
  providers: [...]
})
export class ProgressiveImagePlaceholderDirective implements OnInit, Dimensions {
  // ...
  @HostBinding('style.display') display = Display.flex;

  constructor(private imageState: ImageStateService) {}

realtomaszkula

@Directive({
  selector: 'img[appProgressiveImage]',
  providers: [...]
})
export class ProgressiveImageDirective implements OnInit, Dimensions {
  // ...
  @HostBinding('style.display') display = Display.flex;
   
  constructor(private imageState: ImageStateService) {}

realtomaszkula

export enum Display {
  flex = 'flex',
  none = 'none'
}

realtomaszkula

@Directive({
  selector: 'img[appProgressiveImage]',
  providers: [{
      provide: Dimensions,
      useExisting: forwardRef(() => ProgressiveImageDirective)
    }]
})
export class ProgressiveImageDirective implements OnInit, Dimensions {
  @HostBinding('style.width.px') 
  width: number;

realtomaszkula

@Component({
  selector: 'app-progressive-image',
  template: `<ng-content></ng-content>`,
  providers: [ImageStateService]
})
export class ProgressiveImageComponent implements AfterContentChecked {}

realtomaszkula

enum ImageState {
  loading = 'loading',
  error = 'error',
  loaded = 'loaded'
}

@Injectable()
export class ImageStateService {
  private stateSource = new Subject<ImageState>();
  private state$ = this.stateSource;

realtomaszkula

@Directive({
  selector: 'img[appProgressiveImage]',
  providers: [{
      provide: Dimensions,
      useExisting: forwardRef(() => ProgressiveImageDirective)
    }]
})
export class ProgressiveImageDirective implements OnInit, Dimensions {}

@Directive({