Wait for 'background-image' css style to fully load

Question

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

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

and only then load the rest of the page.

Already tried:

window.onload
window.document.onload
document.getElementById("mainDiv").addEventListener("load", function...)

All this methods are triggered before the image fully renders on the page.

I simulate a slow network using Chrome's developer option "Slow 3G Network"

While the image is rendering all this events have already been triggered. Can't find a simple way to make it work. Any suggestion would be appreciated. Many thanks in advance

var img = new Image(); img.onload = () => {document.getElementById("mainDiv").style.backgroundImage = "url(" + img.src + ")" ; }; img.src = "http://localhost:5000/api/pictures/default/background"; — Ricardo Almeida, Sep 14 '18 at 14:42
https://medium.com/@kittycatbytes/check-background-image-load-event-in-angular-7be87b308fad — CornelC, Sep 14 '18 at 14:43
@CornelC will try that approach. Thanks. Will give an answer soon — Ricardo Almeida, Sep 14 '18 at 14:45
@CornelC in that website comment section it turns out that it does not work in angular 6, and my app will soon be updated, so it means extra work with something that i can make it correct right now. And another comment says it does not work as expected when setting to slow 3G network... =/ — Ricardo Almeida, Sep 14 '18 at 14:50
@MukulSharma will try it. I post here a response when i have it done. Thanks =) — Ricardo Almeida, Sep 14 '18 at 15:20

score 3 · Answer 1 · answered Sep 14 '18 at 15:25

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]'
})
export class BackgroundImageLoadedDirective {
  @Output() imageLoaded: EventEmitter<boolean> = new EventEmitter<boolean>(true);

  constructor(private el: ElementRef) { }

  ngAfterViewInit() {
    const img = new Image();
    const bgStyle = getComputedStyle(this.el.nativeElement).backgroundImage
    const 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

How are we making sure that other things get loaded only after image — Learner, Sep 14 '18 at 15:49
It still does not work using slow 3G internet... dunno why... It doesn't even call the method "loaded()". It just renders... — Ricardo Almeida, Sep 14 '18 at 16:20
To correctly test this you should disable cache, otherwise the image will load instantly. — CornelC, Sep 17 '18 at 09:25

Wait for 'background-image' css style to fully load

1 Answers1

Linked