Как заставить Foundation Apps Interchange загружать изображения по мере необходимости?

Question

В документации по обмену Foundation for Apps (и Angular Base Apps, которая в настоящее время поддерживается F4A) приведен этот пример как способ загрузки только небольшого размера изображения на мобильные устройства для экономии полосы пропускания:

<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 что-то похожее, что мне не хватает? Или в приведенном выше примере кода что-то отсутствует?

Answer 1

Я бы предложил использовать ba-if Директива предоставлена ​​Angular 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">