Foundation for Apps(和Angular Base Apps，它现在是F4A的分支)Interchange的文档给出了这个例子，作为一种在移动设备上加载小尺寸图像以节省带宽的方法:
<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之前请求这三个图像。这就违背了使用交换的目的，至少，如果你的目的是为了节省带宽的话。
Foundation 6 for Sites Interchange通过将所有图像放入元素的data-interchange属性字符串来避免这种情况。F4A是否有我遗漏的类似内容?或者有一些关于上面的示例代码，我错过了?
我建议使用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">