0

我正在用 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">

结果
chrome 开发工具中的网络，两个图像下载

我与基金会网站上的标记和行为以及他们的下载进行了一次比较。使用 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">

网络

开发工具中的网络，一个下载

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

4

2 回答 2

1

从文档：

评估为 true 的最后一条规则将是加载的图像。我们建议您将图像src设置为最小的， 因为它总是会被加载。

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

于 2014-11-20T04:08:38.403 回答
1

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/浏览器。

在这里阅读更多。

于 2014-11-20T08:18:01.623 回答