Angular 5中实现div背景图片加载时显示加载图标问题

嘿，我完全懂你的困扰！给<img>标签做加载状态很顺手，但div的背景图就没那么直观了——毕竟img元素自带load/error事件，可div的背景图是通过CSS渲染的，没有原生事件能直接监听它的加载状态。不过咱们可以改造一下你的指令，用图片预加载的思路来搞定这个问题！

核心思路 #

我们可以手动创建一个Image对象，把要设置为div背景的图片URL赋值给这个Image的src，通过监听这个Image的加载事件，来控制div的加载状态：

1. 初始状态：给div添加加载样式，显示加载图标
2. 图片加载完成：移除加载样式，把图片设置为div的背景图
3. 图片加载失败：可以显示错误提示或者默认图

改造后的指令代码 #

import { Directive, ElementRef, Input, OnInit, OnDestroy } from '@angular/core';

@Directive({
  selector: '[bgImageLoader]'
})
export class BgImageLoaderDirective implements OnInit, OnDestroy {
  @Input('bgImageLoader') bgImageUrl!: string;
  private imageElement?: HTMLImageElement;

  constructor(private el: ElementRef) {}

  ngOnInit(): void {
    // 初始添加加载类
    this.el.nativeElement.classList.add('loading');

    // 创建虚拟Image对象预加载图片
    this.imageElement = new Image();
    this.imageElement.src = this.bgImageUrl;

    // 监听加载完成事件
    this.imageElement.onload = () => {
      this.el.nativeElement.classList.remove('loading');
      // 设置背景图
      this.el.nativeElement.style.backgroundImage = `url(${this.bgImageUrl})`;
    };

    // 监听加载失败事件（可选）
    this.imageElement.onerror = () => {
      this.el.nativeElement.classList.remove('loading');
      // 加载失败时可以设置默认背景图
      this.el.nativeElement.style.backgroundImage = 'url(/assets/default-error.jpg)';
    };
  }

  ngOnDestroy(): void {
    // 清理事件监听，防止内存泄漏
    if (this.imageElement) {
      this.imageElement.onload = null;
      this.imageElement.onerror = null;
    }
  }
}

配套CSS样式 #

给加载状态添加加载图标（这里用CSS动画实现加载 spinner，你也可以换成图片）：

.test {
  width: 300px;
  height: 200px;
  background-size: cover;
  background-position: center;
  position: relative;
}

/* 加载状态样式 */
.test.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

使用示例 #

<!-- div背景图加载 -->
<div class="test" [bgImageLoader]="'some/otherImg.jpg'"></div>

<!-- img标签可以继续用你原来的指令，或者也可以复用这个思路 -->
<img class="test" [someDirective]="'some/OtherImg.jpg'">

为什么原来的指令对div无效？ #

原来的指令应该是直接监听了元素的load事件，但div元素本身不会触发load事件——只有像<img>、<script>这类资源型元素才会触发。所以必须通过创建独立的Image对象来间接监听图片的加载状态。

这样改造后，div的背景图加载过程中就会显示加载图标，加载完成后自动替换成目标背景图啦！

内容的提问来源于stack exchange，提问作者Baastl