3

我正在对用于自动化srcset和sizes创建的 grunt 插件进行重大更新，最近对 Chrome 的行为感到困惑（我在桌面上使用 Chrome 版本 46.0.2490.80 m）。我查看了Yoav Weiss 的演示，发现当我将浏览器宽度调整为 400 像素时，Chrome 正在下载两个图像——招聘和移动。

Chrome下载两张图片

演示页面上使用的代码如下所示：

<img src="yacht_race@fallback.jpg" srcset="
    img/yacht_race@mobile.jpg 320w,
    img/yacht_race@wide-mobile.jpg 480w,
    img/yacht_race@tablet.jpg 768w,
    img/yacht_race@desktop.jpg 1024w,
    img/yacht_race@hires.jpg 1280w"
  sizes="
    (max-width: 20em) 30vw,
    (max-width: 30em) 60vw,
    (max-width: 40em) 90vw"
  alt="A very exciting yacht race.">

在我的个人博客上也发生了同样的情况，其中 -large 和 -medium 图像都被加载了。

我已经与 Yoav 进行了 Twitter 对话，但他无法重现该场景。那里的其他人可以重现吗？是浏览器的错误吗？我对响应式图像有基本的误解吗？任何建议表示赞赏！

4

1 回答 1

3

这里发生的是你得到一个 304 - 它就在图像中。这意味着该图像中的某些内容已被缓存，因此我不会再次加载它。

所以你实际上并没有下载它。

继续将浏览器窗口缩小到非常小，然后清除缓存并加载页面。您将不会再看到您的“大”图像加载。

这是一个简明的解释。

于 2015-10-23T11:41:45.890 回答