import { AfterViewInit , Component , ElementRef , Input , OnDestroy , ViewChild , ViewEncapsulation , } from '@angular/core' ; import { Subscription , tap , timer } from 'rxjs' ; @ Component ( { selector : 'drp-progressive-image' , templateUrl : './progressive-image.component.html' , styleUrls : [ './progressive-image.component.scss' ] , encapsulation : ViewEncapsulation . ShadowDom , } ) export class ProgressiveImageComponent implements AfterViewInit , OnDestroy { private imageLoadSub ? : Subscription ; private listener ? : ( ) => void ; isImageInViewport = false ; imageLoaded = false ; @ ViewChild ( 'hiddenImage' ) hiddenImage ? : ElementRef ; @ ViewChild ( 'image' ) image ? : ElementRef ; @ ViewChild ( 'thumbnail' ) thumbnail ? : ElementRef ; /**
     * Source of the thumbnail image
     */ @ Input ( ) thumbnailSrc ? : string = 'https://picsum.photos/id/2/25/12' ; /**
     * Source of the image
     */ @ Input ( ) imageSrc ? : string = 'https://picsum.photos/id/2/256/128' ; /**
     * Width of the the image.
     */ @ Input ( ) width ? : string = '256px' ; /**
     * Height of the image.
     */ @ Input ( ) height ? : string = '128px' ; /**
     * Transition time between when the image is loaded and is displayed.
     */ @ Input ( ) transitionMilliseconds : number = 500 ; ngAfterViewInit ( ) { this . imageLoadSub = timer ( this . transitionMilliseconds ) . pipe ( tap ( ( ) => console . log ( 'timer transitioned' ) ) ) . subscribe ( ( ) => ( this . imageLoaded = true ) ) ; } ngOnDestroy ( ) { this . imageLoadSub ?. unsubscribe ( ) ; if ( this . listener ) this . listener ( ) ; } }