How to make Foundation Apps Interchange load images as needed?

Question

The documentation for the Foundation for Apps (and Angular Base Apps, which is the now-maintained fork of F4A) Interchange gives this example as a way to load only the small size of an image on mobile devices in order to save bandwidth:

<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>

However, while only the small image is displayed, the browser still sees three img tags and requests all three images, before angular is even loaded. This defeats the purpose of using the interchange at all, at least, if your purpose is to save bandwidth.

The Foundation 6 for Sites Interchange avoids this by putting all of the images into a data-interchange attribute string on the element instead. Does F4A have something similar that I'm missing? Or is there something about the above example code that I'm missing?

Answer 1

I would suggest using the ba-if directive provided by Angular Base Apps. This directive internally uses the ng-if directive, causing the img element to not be added to the DOM except when the specified media query is matched.

Your code can be re-written as follows using the ba-if directive:

<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">