首页 文章

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

提问于
浏览
0

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

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

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

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

反正是否保证在切换值之前至少呈现一次?

1 回答

  • 0

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

相关问题