如何使Foundation Foundation Interchange根據需要加載圖像？

基礎應用程序基礎（和Angular基礎應用程序，這是現在維護的F4A分支）的documentation Interchange給出了這個例子，作爲一種在移動設備上只加載小尺寸圖像以節省帶寬的方法：如何使Foundation Foundation 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標籤，並要求所有三個圖像，前角甚至加載。至少，如果您的目的是爲了節省帶寬，這完全違背了使用交換的目的。

站點互換基金會6通過將所有圖像放入元素的data-interchange屬性字符串中來避免這種情況。 F4A有類似的東西，我錯過了嗎？還是有一些關於上述示例代碼，我錯過了？

來源

2016-09-07 Chris

我會建議使用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">

來源

2016-11-12 00:08:39

這是不是基本上是一回事BA-交換呢？我試過了，但我仍然看到所有三張圖像都被抓取，因爲瀏覽器在加載角度之前看到了img標籤。 – Chris

ba-if在底層使用[ng-if]（https://docs.angularjs.org/api/ng/directive/ngIf），如果表達式爲false，則不會呈現DOM –

正確，但是隻有在Angular正在加載模板時纔有效。在我的情況下，模板是初始請求的一部分。瀏覽器在Angular甚至被加載之前呈現img標籤。但是，工作是使用ng-src而不是src來控制img加載到Angular。 – Chris

如何使Foundation Foundation Interchange根據需要加載圖像？

回答

相關問題