基础交换下载两次

Question

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

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

基础实例

下面是文档上的示例

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

网络

​

​

UPDATE：在img上不带src属性的测试只下载正确的文件，仍然不确定是什么原因造成的，Foundation上的示例代码只有src，并且只下载一次

Answer 1

从医生那里：

最后一个计算为true的规则是加载的图像。我们建议您将图像src设置为最小的，因为这将始终加载。

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

Answer 2

AFAIK正确的语法是：

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

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

所以你的形象有两个要素。一个用于交互(请注意，默认情况下将始终加载)和一个用于SEO/浏览器没有JS。

阅读更多的这里。