Angular 7中如何判断图片完全加载并实现加载后显示？

嘿，这个需求在Angular里实现起来很直观，用Angular的原生指令和事件绑定就能轻松搞定，我给你分步骤拆解：

1. 组件类（.ts文件） #

首先在组件里定义一个状态变量，用来跟踪图片是否加载完成：

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

@Component({
  selector: 'app-image-loader',
  templateUrl: './image-loader.component.html',
  styleUrls: ['./image-loader.component.css']
})
export class ImageLoaderComponent {
  isImageLoaded = false;

  onImageLoad() {
    this.isImageLoaded = true;
  }

  onImageError() {
    // 可选：处理图片加载失败的情况，比如显示占位图或者提示
    this.isImageLoaded = true; // 或者设置另一个状态显示错误占位
  }
}

2. 组件模板（.html文件） #

用*ngIf控制Spinner和图片的显示逻辑，给<img>绑定load和error事件：

<div class="image-container">
  <!-- 加载中的Spinner -->
  <div class="spinner" *ngIf="!isImageLoaded">
    <!-- 这里可以用你项目里的Spinner组件，或者纯CSS的Spinner -->
    <div class="spinner-circle"></div>
  </div>

  <!-- 图片：初始隐藏，加载完成后显示 -->
  <img 
    src="www.domain.com" 
    alt="图片描述"
    (load)="onImageLoad()"
    (error)="onImageError()"
    [class.hidden]="!isImageLoaded"
    class="loaded-image"
  />
</div>

注：如果你的图片地址是动态变量（比如从后端接口获取），直接把src换成[src]="imageUrl"即可，逻辑完全通用。

3. 样式文件（.css文件） #

给容器、Spinner和图片加样式，让Spinner居中，图片加载前隐藏：

.image-container {
  position: relative;
  width: 400px; /* 根据你的需求设置容器宽度 */
  height: 300px; /* 根据你的需求设置容器高度 */
}

.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 纯CSS实现的Spinner示例，也可以替换成你项目里已有的Spinner组件 */
.spinner-circle {
  width: 40px;
  height: 40px;
  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); }
}

.loaded-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 可选：控制图片缩放适配方式 */
}

.hidden {
  display: none;
}

额外优化建议 #

• 如果需要批量处理多个图片，可以把这个逻辑封装成独立的Angular组件，复用起来更高效。
• 对于图片加载失败的场景，建议在onImageError方法里切换显示错误占位图，避免用户看到空白。
• 若不想完全移除DOM元素，也可以用[hidden]替代*ngIf，但*ngIf会直接从DOM中移除未加载的图片，性能表现更优。

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