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

Posted 2023-03-25

【中文标题】如何在 AngularJS 中显示占位符图像

【英文标题】：How to show a placeholder image in AngularJS

【发布时间】：2019-02-05 22:05:09

【问题描述】：

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

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

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

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

有没有办法保证在我切换值之前至少渲染一次？

【问题讨论】：

增加超时有帮助吗？如果只设置 1000 超时会发生什么？我假设您使用正确。 0 timeout 超级快，取决于浏览器的性能。您可能需要查看图像预取或预加载，然后在图像加载后应用 url 并在此之前显示占位符。

没错，在从url渲染图片之前就超时了，你需要增加超时时间来渲染图片，到那时你可以使用静态图片，图片渲染后会切换或让 Spinner 完成它的工作，直到图像呈现。

$timeout 应该运行_after_ 当前的摘要循环，可选择创建一个新的，因此超时值 0 只是获得新摘要循环的一种手段。我的假设是，在任何给定的摘要循环之后，浏览器将被允许呈现。我不想使用更长的超时时间，因为它会增加在某些情况下会感觉到的任意延迟。这可能是我唯一的选择，我只是不喜欢添加额外的超时以希望某些工作正常。

【参考方案1】：

我最终采用的解决方案是删除 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;

【讨论】：

如果getTheRealImageURL 是异步的，那么cope.imageSource = getTheRealImageURL(); 将不起作用:)

你会在getTheRealImageURL().then( url => scope.imageSource = url; )的行中做一些事情

是的……它是为了提供信息。我知道承诺是如何运作的。