Wait For 'background-image' Css Style To Fully Load

My app is being developed in Angular 5. I want to load the background image first

Solution 1:

I tweaked cat.'s answer a little and got it to work.

This solution is based on this question

We will create a new image in memory and use the load event to detect when the image finished loading.

import { Directive, Input,  Output, EventEmitter, ElementRef } from'@angular/core';

@Directive({
  selector: '[appBackgroundImageLoaded]'
})
exportclassBackgroundImageLoadedDirective {
  @Output() imageLoaded: EventEmitter<boolean> = newEventEmitter<boolean>(true);

  constructor(private el: ElementRef) { }

  ngAfterViewInit() {
    const img = newImage();
    const bgStyle = getComputedStyle(this.el.nativeElement).backgroundImageconst src = bgStyle.replace(/(^url\()|(\)$|[\"\'])/g, '');
    img.src = src;
    img.addEventListener('load', ()=> {
      this.imageLoaded.emit(true);
    });
  }
}

And the template

<div id="mainDiv"class="sign-in" [ngStyle]="{'background-image': 'url(' + background_source + ')'}" appBackgroundImageLoaded (imageLoaded)="loaded()">

DEMO

Share