在Angular中如何获取图片渲染完成后的最终实际显示尺寸

核心逻辑 #

(load) 事件触发仅代表图片资源加载完成，此时页面还未完成重排重绘，因此获取的是临时尺寸。我们只需要把尺寸计算逻辑延迟到视图渲染完成后执行，同时只监听你需要的两个触发时机（图片加载完成、窗口尺寸调整）即可，完全规避ngAfterViewChecked频繁触发的问题。

完整实现代码 #

1. 基础依赖引入与变量声明 #

import { Component, ElementRef, ViewChild, afterNextRender, HostListener } from '@angular/core';
import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

@Component({
  selector: 'app-image-size-demo',
  template: `<img #targetImg src="你的图片资源地址" (load)="handleImgLoad()" />`
})
export class ImageSizeDemoComponent {
  // 绑定图片DOM引用
  @ViewChild('targetImg') imgRef!: ElementRef<HTMLImageElement>;
  // 窗口resize防抖间隔，可根据需求调整，单位ms
  private readonly RESIZE_DEBOUNCE = 200;
}

2. 图片加载完成后获取最终尺寸 #

Angular 16+ 可以直接用官方提供的afterNextRender API，只会在下次视图渲染完成后触发一次，不会重复执行：

handleImgLoad() {
  afterNextRender(() => {
    this.calculateImgSize();
  });
}

如果是Angular 16以下版本，用0延迟setTimeout替代即可，等价于等待DOM渲染完成后执行：

handleImgLoad() {
  setTimeout(() => this.calculateImgSize(), 0);
}

3. 监听窗口尺寸调整，加防抖避免频繁触发 #

@HostListener('window:resize')
handleWindowResize() {
  fromEvent(window, 'resize')
    .pipe(debounceTime(this.RESIZE_DEBOUNCE))
    .subscribe(() => this.calculateImgSize());
}

4. 封装尺寸计算逻辑 #

private calculateImgSize() {
  const imgElement = this.imgRef.nativeElement;
  // 此处拿到的就是页面完全渲染后的最终尺寸
  const renderWidth = imgElement.offsetWidth;
  const renderHeight = imgElement.offsetHeight;

  // 你的业务逻辑
  console.log('图片最终渲染尺寸：', renderWidth, renderHeight);
}

效果说明 #

上图为(load)事件触发时的临时尺寸状态，和最终渲染尺寸存在差异的场景，上述方案可以完美避开该问题。

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