logo标签列表

为什么Srcset会下载两张图片？

htmlperformancegoogle-chromesrcsetresponsive-images
3
我正在开发一个用于自动创建 srcset 和 sizes 的 Grunt 插件的重要更新，但最近对 Chrome 的行为感到困惑（我在桌面上使用的是 Chrome 版本 46.0.2490.80 m）。我查看了 Yoav Weiss' 的演示，并注意到当我将浏览器宽度调整到 400px 时，Chrome 会下载两个图像 - hires 和 mobile。

Chrome downloading two images

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

<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.">

在我的个人博客上也出现了同样的情况，即大图和中图都被加载。

我已经与Yoav进行了推特对话，他无法重现这种情况。还有其他人能够重现吗？这是浏览器的bug吗？我对响应式图片有基本的误解吗？任何建议都将不胜感激！

是的...这很尴尬，实际上只是一个缓存错误。谢谢Brad！ - Stephan Max
1个回答
4
这里发生的是你得到了一个304 - 就在图像中。这意味着类似于此图像已经被缓存，所以我不会再次加载它。

因此你实际上没有下载它。

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

这里有一个简明的解释。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接