Foundation interchange downloading twice

Question

I'm writing simple template code in PHP to generate an interchange img tag in HTML. The image swaps correctly at different sizes, the problem is that the browser always downloads twice, once the correct image I specify, and once the highest resolution.

PHP

if($page->hasImages()){
    $image = $page->image();

    $small = thumb($image, array('width' => 300))->url() ;
    $medium = thumb($image, array('width' => 600))->url() ;
    $large = thumb($image, array('width' => 900))->url() ; ?>

    <img data-interchange="[<?php echo $medium; ?>, (default)], 
    [<?php echo $small; ?>, (small)], 
    [<?php echo $medium; ?>, (medium)], 
    [<?php echo $large; ?>, (large)]" 
     src="<?php echo $large; ?>">
<?php } ?>

Markup

<img data-interchange="[.../thumbs/2500x400-239ccc449c26c0e384a3a1a6402a37f1.jpg, (default)],
[.../thumbs/2500x400-62601f35a590e4c8b64be412dc67779d.jpg, (small)],
[.../thumbs/2500x400-239ccc449c26c0e384a3a1a6402a37f1.jpg, (medium)],
[.../thumbs/2500x400-6a0974d125585865c962c1f9372bd30a.jpg, (large)]" 
src=".../thumbs/2500x400-6a0974d125585865c962c1f9372bd30a.jpg" 
data-uuid="interchange-i2pip11r1">

Result
network in chrome dev tools, two image downloads

I compared against the markup and behavior on the Foundation site and theirs downloads once. Using FFX 33 and Chrome 38

Foundation example
Here's the example on the docs

<img data-interchange="[../assets/img/examples/space-small.jpg, (small)], 
[../assets/img/examples/space-medium.jpg, (medium)], 
[../assets/img/examples/space-large.jpg, (large)]" 
data-uuid="interchange-i2qxxgtv0" 
src="../assets/img/examples/space-large.jpg">

Network

network in dev tools, one download

UPDATE: Testing without the src attribute on img downloads only the correct file, still not sure what's causing this, the sample code on Foundation docs has the src and downloads only once

score 1 · Accepted Answer · edited May 23 '17 at 10:33

1

From the docs:

The last rule that evaluates to true will be the image that gets loaded. We recommend that you set your image src to the smallest one, as this will always get loaded.

Note that you shouldn't omit src attribute, it's required + it will be used for search engines. But you can prevent it from loading(might be quirky) https://stackoverflow.com/a/1667886/1224362

edited May 23 '17 at 10:33

Community

1
1

answered Nov 20 '14 at 04:08

JAre

4,666
3
27
45

I know, I don't want to skip src I'm just saying it works if I do. The first example using images on foundation has the src but only downloads once – blackbird Nov 20 '14 at 14:08
@Blackbird57 Interchange will not query the image again if the src attribute set to the image that matches media query. – JAre Nov 20 '14 at 21:31
the src to match the media query ? But how will I know which is the right one when I'm writing code, that's the whole point of using interchange isn't it ? :) – blackbird Nov 21 '14 at 01:03
1

@Blackbird57 that's why they recommend "that you set your image src to the smallest one, as this will always get loaded." in addition to the other image that is selected by the media query rule if it's not the same image. So ya you will have small overhead, but it's not crucial since the smallest image is, well..., small. Your you can try to prevent it from loading with some hacky stuff, but IMHO it not worth the troubles. – JAre Nov 21 '14 at 02:37
Then how come their example only loads one image ? I added info in the question, check the code – blackbird Nov 21 '14 at 02:44
@Blackbird57 they simply don't have the src attribute `` Interchange adds it later which is not recommended solution, but, apparently, it's good enough for them. – JAre Nov 21 '14 at 04:10
Ugh I feel so stupid. You're right the src is added dynamically, it makes sense now, thanks – blackbird Nov 21 '14 at 20:41

score 1 · Answer 2 · answered Nov 20 '14 at 08:18

1

AFAIK the correct syntax is:

<img data-interchange="[/path/to/default.jpg, (default)],
                       [/path/to/bigger-image.jpg, (large)]">

<noscript>
    <img src="/path/to/default.jpg">
</noscript>

So you have two elements for your image. One for intercharge (note that default will always be loaded) and one for SEO/browsers without JS.

Foundation interchange downloading twice

2 Answers2