如何在AngularJS中显示占位符图像

Posted 2021-04-15

使用AngularJS，在特定视图中，我们使用图像的自然大小来驱动布局（使用最大高度，最大宽度，但让图像尽可能地扩展以适应该区域）。

我们还根据图像的预定高度和宽度以及主色信息，使用占位符数据uri作为图像。我们这样做的原因是因为使用画布图像为我们提供了相同的“自然”大小调整信息，我们不必不断地重新计算div的宽度和高度，以便调整大小，同时保持宽高比等。

因此，该指令首先使用Canvas创建一个数据uri并将其设置为scope.imgSrc的值，然后稍微延迟（只是一个$timeout(0)）后，我们用实际的图像源url更新该范围值。

不幸的是，这并不总是有效。通常，在我们已经更新范围值以指向真实URL之后，模板才会实际呈现。结果是数据uri永远不会被渲染到屏幕上，我们最终只显示真实的URL。在慢速网络上，这意味着占位符应该是空白区域，因为占位符永远不会呈现。

无论如何要保证在切换值之前至少呈现一次？

答案

我最终使用的解决方案是删除dataURI值的图像的自定义onload指令，使用dataURI或img源与img标记本身结合使用。

在模板中：

<img ng-src="{{dataURI || imageSource}}" custom-onload="removeDataURI()">

在指令中：

scope.dataURI = getTheCanvasBasedURI();
scope.imageSource = getTheRealImageURL(); // this is async.

scope.removeDataURI = function() {
  scope.dataURI = undefined;
}