0

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

4

1 回答 1

0

我建议使用ba-ifAngular Base Apps 提供的指令。该指令在内部使用该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">
于 2016-11-12T00:08:39.130 回答