Подождите, пока CSS-стиль background-image полностью загрузится

Question

Мое приложение разрабатывается на Angular 5. Я хочу сначала загрузить фоновое изображение

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

, а затем загрузить остальную часть страницы.

Уже пробовал:

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

Все эти методы запускаются до того, как изображение полностью отображается на странице.

Я моделирую медленную сеть, используя опцию разработчика Chrome "Медленная сеть 3G"

Пока изображениерендеринг всех этих событий уже сработал.Не могу найти простой способ заставить его работать.Любое предложение будет оценено.Большое спасибо заранее

Answer 1

Я подправил ответ кота. немного и заставил его работать.

Это решение основано на этом вопросе

Мы создадим новое изображение в памяти и используем событие загрузки, чтобы определить, когда загрузка изображения закончилась.

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);
    });
  }
}

И шаблон

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

DEMO