Question

使用AngularJS，在一个特定的视图中，我们使用图像的自然大小来驱动布局（使用max-heights，max-widths，但是让图像尽可能扩展以适合该区域）。

我们还根据图像的预定高度和宽度以及主要颜色信息，对图像使用占位符数据uri。之所以这样做，是因为使用画布图像可以提供相同的“自然”尺寸信息，并且无需在保持宽高比等的同时不断地重新计算div的宽度和高度来调整大小。

因此，该指令首先使用Canvas创建一个data-uri并将其设置为scope.imgSrc的值，然后在稍有延迟（仅$timeout(0)之后），我们使用实际值更新该范围值图片来源网址。

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

无论如何，在切换值之前，是否有东西可以保证至少渲染一次？

Answer 1

我最终采用的解决方案是针对图像的自定义onload指令，该指令删除了dataURI值，并使用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;
}

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

1 个答案: