javascript - 基础交换下载两次

Question

我正在 PHP 中编写简单的模板代码，以在 HTML 中生成交换 img 标记。图像以不同的尺寸正确交换，问题是浏览器总是下载两次，一次是我指定的正确图像，一次是最高分辨率。

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

标记

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

结果

我对基金会网站上的标记和行为以及他们的下载进行了一次比较。 使用 FFX 33 和 Chrome 38

基础示例
这是 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">

网络

更新:在 img 上没有 src 属性的情况下进行测试仅下载正确的文件，仍然不确定导致此问题的原因，Foundation 文档上的示例代码具有 src 并且仅下载一次

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.

请注意，您不应省略 src 属性，它是必需的 + 它将用于搜索引擎。但你可以阻止它加载(可能有点奇怪)https://stackoverflow.com/a/1667886/1224362