如何让基础应用互换按需加载镜像？

Question

基础应用程序(和Angular Base应用程序，现在是F4A的分支)交换的documentation给出了这个示例，作为一种仅在移动设备上加载小尺寸图像的方法，以节省带宽：

<ba-interchange>
    <img media="small" src="assets/img/small.jpg">
    <img media="medium" src="assets/img/medium.jpg">
    <img media="large" src="assets/img/large.jpg">
</ba-interchange>

然而，虽然只显示了小图像，但浏览器仍然会看到三个img标记，并在加载angular之前请求所有三个图像。这完全违背了使用交换的目的，至少，如果您的目的是节省带宽的话。

Foundation6for Sites Interchange通过将所有图像放入元素上的data-interchange属性字符串中来避免这种情况。F4A有没有我遗漏的类似东西？或者，上面的示例代码中有什么我遗漏的？

Answer 1

我建议使用Angular Base Apps提供的ba-if指令。此指令在内部使用ng-if指令，导致img元素不会添加到DOM中，除非指定的媒体查询匹配。

可以使用ba-if指令重写代码，如下所示：

<img ba-if="small only" src="assets/img/small.jpg">
<img ba-if="medium only" src="assets/img/medium.jpg">
<img ba-if="large only" src="assets/img/large.jpg">