2016-09-07 2 views
0

documentation для Фонда приложений (и приложений с угловой базой, который является поддерживаемой в настоящее время fork F4A). Обмен означает этот пример как способ загрузки только небольшого размера изображения на мобильных устройствах, чтобы сохранить пропускную способность:Как сделать приложения для Foundation Apps Обмен изображениями при необходимости?

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

ответ

0

Я бы предложил использовать директиву 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"> 
+0

Является ли это в принципе то же самое, ба-взаимообмен делает? Я попробовал, но я все еще вижу все три изображения, которые извлекаются, потому что браузер видит теги img перед загрузкой углов. – Chris

+0

ba-if использует [ng-if] (https://docs.angularjs.org/api/ng/directive/ngIf) под капотом, который не отображает DOM, если выражение ложно –

+0

Правильно, но это работает только в том случае, если Angular загружает шаблон. В моем случае шаблон является частью первоначального запроса. Браузер передает теги img, пока Angular даже не загружен. Однако для работы с ng-src вместо src необходимо использовать управление img для Angular. – Chris