progressive image loading directive for angular 2+ / wrapper background css loads small image while directive loads a big one and adds it on the top

app.module.ts

import {ImageloaderDirective} from './directives/imageloader/imageloader.directive';

@NgModule({
...
    declarations: [
        ImageloaderDirective
    ],
...
})

home.component.css

.image_bg_sm {
  background-image: url(/assets/img/image_sm.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

home.component.html

<div class="image_bg_sm" imagePreload="/assets/img/image_hd.jpg"></div>

imageloader.directive.ts

import {Directive, ElementRef, Input} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';

@Directive({selector: '[imagePreload]'})
export class ImageloaderDirective {
    link: string;
    tmpImg: HTMLImageElement;

    constructor(el: ElementRef) {
        this.link = el.nativeElement.getAttribute('imagePreload'); // get image url
        this.tmpImg = new Image(); // new phantom image
        this.tmpImg.src = this.link;
        this.tmpImg.onload = () => { // when loaded
            el.nativeElement.style.backgroundImage = 'url(' + this.link + ')'; // set hd background image
        };
    }
}