最新的Chrome / Opera是否错误处理了srcset？

Question

我正在处理以下标记的页面：

<img
alt=""
src="/banner_home.300x200.jpg"
srcset="/banner_home.300x200.jpg 320w,
       /banner_home.600x400.jpg 480w,
       /banner_home.728x242.jpg 768w,
       /banner_home.920x306.jpg 960w,
       /banner_home.1234x400.jpg 1280w">

在最新版的Chrome和Opera浏览器中，它们似乎会忽略屏幕尺寸并只输出列表中最后一个文件（例如，在我的情况下是1234x400.jpg）。使用Picturefill插件，Firefox和Safari在较小屏幕上都能正确显示图片。在今天的测试中，我启动了一段时间没有使用的Opera浏览器。当它首次启动时，它以v25版本显示小屏幕上的正确图像。然后我注意到已经下载了一个更新，于是运行更新后升级到了v27，然后发现Opera也出现了与最新版Chrome相同的问题。因此，最近Blink有些变化，请问还有其他人能够确认这个问题或者说我做错了什么？附代码演示链接。

- Tyssen

Answer 1

你测试错了: D

Chrome 40中的一个更改意味着当高密度资源在缓存中可用时(例如，您示例中最大可能的图像)，这就是将被选择的资源，因为重新下载不同的低分辨率资源没有意义。

如果您真的想测试在较小设备上下载哪个资源(不应该依赖于选择哪个资源，因为srcset并非是关于那个的)，您可以在实际设备上进行测试，或者打开隐身会话，调整浏览器大小(或者模拟一个设备)，然后只加载测试页面。

我也创建了一个稍微清晰的测试案例，您可以看到加载了哪个图像。

另外：从您的示例中看来，您正在使用具有不同比例的图像。 这不是您应该使用srcset的情况，而是应该使用提供有关加载哪个资源的保证的<picture>，这样您的布局不会因错误加载图像而破裂。

使用srcset时，不存在“错误”的图像。 浏览器可以自由选择它认为合适的任何一个(因为它在缓存中，连接性低，用户偏好设置如此等)。

- Yoav Weiss

Answer 2

如果您将此内容粘贴到控制台中，则可以看到在您的浏览器中呈现的图像源。

console.log(jQuery（'.your-image-class img'）.prop（'currentSrc'））;

- starryeyez024