Как сделать приложения для Foundation Apps Обмен изображениями при необходимости?

Question

documentation для Фонда приложений (и приложений с угловой базой, который является поддерживаемой в настоящее время fork 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. Эта директива внутренне использует директиву 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">