等待“背景图像”css 样式完全加载

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 的开发者选项“Slow 3G Network”模拟慢速网络

在渲染图像时，所有这些事件都已被触发。找不到一种简单的方法来使它工作。 任何建议将不胜感激。非常感谢提前

Answer 1

我稍微调整了cat.'s answer 并让它工作。

本方案基于this question

我们将在内存中创建一个新图像，并使用 load 事件来检测图像何时完成加载。

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