使用AngularJS,在特定视图中,我们使用图像的自然大小来驱动布局(使用最大高度,最大宽度,但让图像尽可能地扩展以适应该区域) .
我们还根据图像的预定高度和宽度以及主色信息,使用占位符数据uri作为图像 . 我们这样做的原因是因为使用画布图像为我们提供了相同的“自然”大小调整信息,我们不必为了调整大小而不断重新计算div的宽度和高度,同时保持宽高比等 .
因此,该指令首先使用Canvas创建一个data-uri并将其设置为 scope.imgSrc
的值,然后稍微延迟(只是 $timeout(0)
)后,我们使用实际的图像源url更新该范围值 .
不幸的是,这并不总是有效 . 通常,在我们已经更新范围值以指向真实URL之后,模板才会实际呈现 . 结果是数据uri永远不会被渲染到屏幕上,我们最终只显示真实的URL . 在慢速网络上,这意味着占位符应该是空白区域,因为占位符永远不会呈现 .
反正是否保证在切换值之前至少呈现一次?
1 回答
我最终使用的解决方案是删除dataURI值的图像的自定义onload指令,使用dataURI或img源与img标记本身结合使用 .
在模板中:
在指令中: