7

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

<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 最近似乎发生了一些变化。

其他人可以确认这一点还是我做错了？

Codepen来说明我的意思。

4

2 回答 2

14

你持有错误的测试：D

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

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

当您可以看到加载了哪个图像时，我还从您的测试用例中创建了一个稍微清晰的测试用例。

另外：从您的示例看来，您在 srcset 中使用了不同比例的图像。这不是你应该使用的东西srcset，而是使用<picture>，它提供关于加载哪个资源的保证，所以你的布局不会因为加载了错误的图像而中断。

当您使用srcset时，没有“错误”的图像。浏览器可以自由选择它认为合适的任何一个（因为它在缓存中、连接性低、用户偏好如此等等）。

于 2015-02-06T14:55:38.130 回答
2

如果将其粘贴到控制台中，您将看到正在浏览器中呈现的图像源。

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

于 2015-02-17T15:33:48.337 回答