如何优化Angular Material Dialog，避免图片每次打开都重新加载

要实现模态框首次打开时加载图片、后续打开复用缓存的效果，核心思路是跟踪图片的加载状态，避免重复触发加载请求。以下是两种可行的实现方案：

方案一：直接在 Speaker 对象中标记加载状态 #

这种方式无需额外服务，直接利用 Speaker 对象的引用特性保存加载状态，适合单一场景使用。

步骤1：扩展 Speaker 接口 #

给你的 Speaker 类型添加一个可选的加载状态标记：

interface Speaker {
  domain: string;
  thumbnail: string;
  name: string;
  jobTitle: string;
  biography: string;
  sessions: Array<{
    'page-url': string;
    'page-id': string;
    name: string;
  }>;
  // 新增：标记图片是否已加载
  isImageLoaded?: boolean;
}

步骤2：修改模态框组件逻辑 #

在模态框组件中，初始化时检查图片加载状态，未加载则预加载并标记：

import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-premium-event-speakers-modal',
  templateUrl: './premium-event-speakers-modal.component.html',
})
export class PremiumEventSpeakersModalComponent {
  speaker: Speaker;
  imageSrc: string;

  constructor(@Inject(MAT_DIALOG_DATA) public data: { speaker: Speaker }) {
    this.speaker = data.speaker;
    this.imageSrc = `${this.speaker.domain}${this.speaker.thumbnail}`;

    // 仅首次打开时预加载图片
    if (!this.speaker.isImageLoaded) {
      this.preloadImage();
    }
  }

  private preloadImage(): void {
    const img = new Image();
    img.src = this.imageSrc;
    img.onload = () => {
      // 标记为已加载，后续打开模态框时跳过预加载
      this.speaker.isImageLoaded = true;
    };
    // 可选：处理图片加载失败的情况
    img.onerror = () => {
      console.error(`图片加载失败：${this.imageSrc}`);
    };
  }
}

步骤3：HTML 模板无需修改 #

原有的 <img> 标签保持不变，浏览器会自动复用已缓存的图片资源：

<img
  alt=""
  width="200"
  height="200"
  [src]="speaker.domain + speaker.thumbnail"
/>

方案二：使用全局图片缓存服务 #

如果你的应用中有多处需要图片缓存的场景，推荐使用独立的缓存服务，解耦业务逻辑与缓存逻辑。

步骤1：实现图片缓存服务 #

创建一个全局服务来管理已加载的图片：

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class ImageCacheService {
  private loadedImageUrls = new Set<string>();

  // 检查图片是否已加载
  isImageLoaded(url: string): boolean {
    return this.loadedImageUrls.has(url);
  }

  // 标记图片为已加载
  markImageLoaded(url: string): void {
    this.loadedImageUrls.add(url);
  }

  // 预加载图片并返回 Promise
  preloadImage(url: string): Promise<void> {
    return new Promise((resolve, reject) => {
      if (this.isImageLoaded(url)) {
        resolve();
        return;
      }
      const img = new Image();
      img.src = url;
      img.onload = () => {
        this.markImageLoaded(url);
        resolve();
      };
      img.onerror = reject;
    });
  }
}

步骤2：在模态框组件中使用缓存服务 #

注入缓存服务，初始化时检查并预加载图片：

import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { ImageCacheService } from '../services/image-cache.service';

@Component({
  selector: 'app-premium-event-speakers-modal',
  templateUrl: './premium-event-speakers-modal.component.html',
})
export class PremiumEventSpeakersModalComponent {
  speaker: Speaker;
  imageSrc: string;

  constructor(
    @Inject(MAT_DIALOG_DATA) public data: { speaker: Speaker },
    private imageCacheService: ImageCacheService
  ) {
    this.speaker = data.speaker;
    this.imageSrc = `${this.speaker.domain}${this.speaker.thumbnail}`;

    // 检查缓存，未加载则预加载
    if (!this.imageCacheService.isImageLoaded(this.imageSrc)) {
      this.imageCacheService.preloadImage(this.imageSrc).catch(err => {
        console.error('图片预加载失败：', err);
      });
    }
  }
}

核心原理说明 #

1. 引用类型特性：方案一中，Speaker 对象是引用类型，标记的 isImageLoaded 会保存在原对象上，后续打开模态框时能直接读取状态。
2. 浏览器缓存：无论哪种方案，首次加载后浏览器会自动缓存图片资源，后续请求会直接读取缓存，不会重新发起 HTTP 请求。
3. 主动预加载：通过创建 Image 对象提前加载图片，确保模态框打开时图片已在缓存中，提升用户体验。

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