如何根据需要使 Foundation Apps Interchange 加载图像？答案

【问题标题】：How to make Foundation Apps Interchange load images as needed?如何根据需要使 Foundation Apps Interchange 加载图像？
【发布时间】：2016-09-07 14:26:15
【问题描述】：

documentation for 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 是否有我想念的类似的东西？或者上面的示例代码有什么我遗漏的地方吗？

【问题讨论】：

标签： zurb-foundation zurb-foundation-apps

【解决方案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">

【讨论】：

这不是 ba-interchange 所做的基本相同的事情吗？我试过了，但我仍然看到所有三个图像都被提取，因为浏览器在加载 angular 之前看到了 img 标签。
ba-if 在后台使用 ng-if，如果表达式为 false，则不会渲染 DOM
正确，但这仅在 Angular 加载模板时有效。在我的情况下，模板是初始请求的一部分。浏览器在加载 Angular 之前渲染 img 标签。然而，起作用的是使用 ng-src 而不是 src，来控制 Angular 的 img 加载。