基础交流下载两次

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

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

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

Answer 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