检测图像何时在屏幕上完成渲染

Detect when image has finished rendering on screen

这基本上是我的 HTML。它是响应式设计的一部分，所以我不能依赖固定的 widths/heights:

<img ng-src="{{imageSrc}}" />

$scope.imageSrc 的值已在我的控制器中更改，并且视图正在正确更新。

但是：当图像完成渲染时，我需要获取其 clientWidth 和 clientHeight 属性。

那么我如何以编程方式检测

  1. 图像已完成加载并且
  2. 视图已使用渲染图像完全更新

不使用奇怪的超时？

另外两个问题可以帮到您。 此 SO post 将通过 load 事件检测加载。
this post 将通过 requestAnimationFrame.

检测渲染