基础交流下载两次

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属性的测试只会下载正确的文件，但仍然不确定导致此问题的原因，基础文档上的示例代码只有src并且只下载一次< / p>

Answer 1

From the docs:

  

评估为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>

因此，您的图像有两个元素。一个用于充电（注意默认将始终加载）和一个用于没有JS的SEO /浏览器。

了解更多here。